Как сделать одновременный ховер на нескольких элкметах, с помощью JavaScript

Иногда, в процессе разработки дизайнер просит ховерить ссылку при наведении на картинку или какой-то другой элемент DOM

Сделать это в html не всегда возможно. Нам поможет jQuery:

    /**
    * mirror hover elements 
    */
    if(jQuery('.mirror-hover').length) {
     
 var elements = jQuery('.mirror-hover');
      
      elements.each(function(){
        var el = jQuery(this);
        var idMirror = el.attr('data-for');
        var elMirror = jQuery('#' + idMirror);
        
        el.on('mouseenter', function() {
          elMirror.addClass('hovered'); 
        }).on('mouseleave', function() {
          elMirror.removeClass('hovered');
        });
      });
    }

Элементу на который наводим мышь даем класс mirror-hover, в нашем случае это, например, картинка. Ссылку, которую нужно ховерить делаем id="link-hover". И такой же идентификатор пишем для картинки в атрибут data-for="link-hover".

В css классу ссылки hovered вешаем стили ссылки на ховер.

8 Июля 2015
Последние новости
29 Сентября 2016
Создан интернет-магазин для компании «Надеко»
29 Июля 2016
Создан сайт для компании «ACS Termal»
Сделать заказ
Нужен интернет-магазин?