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

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

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

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

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

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

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

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

Метки:

Привет. Ты находишься на моём сайте. Я разработчик. Здесь я делюсь своими наработками и знаниями. Спрашивай в комментариях, если тебе что-то не понятно или пиши, если есть что добавить.

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *