Как при наведении мышки на один объект менять другой

Admin JavaScript

Если необходимо поменять свойства элемента при наведении на него, это легко сделать с помощью CSS. А когда требуется изменить другой элемент, то здесь придётся сочетать CSS с jQuery.

Мы сделаем так, чтобы при наведении мышки на один элемент (пусть это будет #mouseover) будет изменяться элемент с class="what-will-be-changed".

В примере ниже у элемента class="what-will-be-changed" будет изменяться фоновое изображение.

Создаём файл mouseover.js. Туда записываем следующий код:

( function( $ ) {
$(document).ready(function(){
    $("#mouseover").mouseover(function(){
        $('.what-will-be-changed').css('background', 'url(//ploshadka.net/wp-content/themes/ploshadka.net/assets/images/img.jpg)');
    });
});
} )( jQuery );

Подключаем этот файл javasript-а на странице:

<script src="<?php echo get_template_directory_uri(); ?>/assets/js/mouseover.js"></script>

Для работы скрипта также надо подключить библиотеку jQuery (если она отсутсвует). Подключим библиотеку jquery.min.js от Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Загрузка библиотеки с сайта Google позволяет экономить на скорости загрузки сайта. Если пользователь ранее уже загрузил такую библиотеку в своём браузере, то она закешировалась и повторно грузиться не будет.

Метки:

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Как при наведении мышки на один объект менять другой"