Как навести курсор на разные элементы с помощью jquery.

Question

Я пытаюсь сделать так, чтобы, когда вы наведете элемент списка, соответствующая часть будет подсвечена, и когда вы наведете кусок, соответствующий элемент списка будет выделен.

До сих пор, когда вы наводите указатель на элемент списка, он выделяет соответствующую область карты, но как я могу написать ее так, чтобы она зависала взаимно?

Я пробовал:

   $('.one, #one').hover(function(){  
        $('#one, .one').attr("fill", "#213A46"); 
        $(".info-one").fadeIn(); 
       },  
       function(){  
        $('#one, .one').attr("fill", "#009A8B"); 
        $(".info-one").hide(); 
       }); 

и это, похоже, не работает. Любые предложения будут полезны. Вот код того, над чем я сейчас работаю: http://codepen.io/anon/pen/zGzoMY

Answer 1

Вы не можете изменить состояние элемента, поэтому вам нужно изменить .region-list li:hover { на .region-list li:hover, .region-list li.hover {.

Затем вы можете добавить его в ваших JS, то есть:

$('#four').hover(
    function() {  
     $('#four').attr("fill", "#213A46"); 
     $('.four').addClass('hover'); 
     $(".info-four").fadeIn(); 
    },  
    function() {  
     $('#four').attr("fill", "#3F6C80"); 
     $('.four').removeClass('hover'); 
     $(".info-four").hide(); 
    } 

Answer 2

Это не представляется возможным. Вам нужно добавить к элементу класс, например .hover.

см: https://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

Путь, чтобы вызвать парить на литий при наведении на карте что-то вроде этого:

$('#one').hover(function() { 
    $('.one').trigger('mouseenter'); 
}); 

Но чтобы добавить класс вы будете делать что-то вроде

$('#one').hover(function() { 
    $('.one').addClass('hover'); 
}); 

Тогда не забудьте удалить класс на мышеловке.

Answer 3

Вам необходимо добавить обработчик hover к графику, которая содержит #one. В противном случае, когда вы наводите курсор на текст внутри полигона, это рассматривается как выход из полигона.

$('.one, g:has(#one)').hover(function() { 
    $('#one').attr("fill", "#213A46"); 
    $('.region-list .one').css({ 
     backgroundColor: '#213a46', 
     color: '#ffffff' 
    }); 
    $(".info-one").fadeIn(); 
    }, 
    function() { 
    $('#one').attr("fill", "#009A8B"); 
    $('.region-list .one').css({ 
     backgroundColor: 'inherit', 
     color: 'inherit' 
    }); 
    $(".info-one").hide(); 
    }); 

Modified Codepen

Я только обновил #one, другие похожи. Было бы лучше реализовать это, используя DRY-методы, где вы найдете обратные элементы, используя атрибуты данных, но я не беспокоился об этом переписывании.