Если необходимо поменять свойства элемента при наведении на него, это легко сделать с помощью CSS. А когда требуется изменить другой элемент, то здесь придётся сочетать CSS с jQuery.
Мы сделаем так, чтобы при наведении мышки на один элемент (пусть это будет #mouseover) будет изменяться элемент с class="what-will-be-changed".
В примере ниже у элемента class="what-will-be-changed" будет изменяться фоновое изображение.
Создаём файл mouseover.js. Туда записываем следующий код:
$(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-а на странице:
Для работы скрипта также надо подключить библиотеку jQuery (если она отсутсвует). Подключим библиотеку jquery.min.js от Google:
Загрузка библиотеки с сайта Google позволяет экономить на скорости загрузки сайта. Если пользователь ранее уже загрузил такую библиотеку в своём браузере, то она закешировалась и повторно грузиться не будет.
