对应的<ul> <li>同时悬停突出显示</li> </ul>

Question

好吧，这有点奇怪，

我有2个ul，每个都有相同数量的li ...

在jQuery中我希望能够覆盖其中任何一个并且看到它，并且相应的li（来自其他ul）得到类“突出显示”......

我可以通过计算列表顶部的数字来完成吗？

但仍然不知道怎么做。

以下是我正在寻找的视觉表现：

Answer 1

$('#list1 > li').hover(function() {
    $('#list2 > li').eq($(this).index()).addClass('hover');
}, function() {
    $('#list2 > li').eq($(this).index()).removeClass('hover');
});

或者，如果你想要两个方向：

$('.list > li').hover(function() {
    var idx = $(this).index();
    $('.list > li:nth-child('+(idx+1)+')').addClass('hover');
}, function() {
    var idx = $(this).index();
    $('.list > li:nth-child('+(idx+1)+')').removeClass('hover');
});

演示：http://jsfiddle.net/ThiefMaster/XNRux/

Answer 2

试试这个：

$("ul.list1>li").hover(function(){
      var ind=$(this).index();
   $(this).css("background-color","red");
   $('ul.list2 li:eq('+ind+')').css("background-color","red");
},
function(){
    var ind=$(this).index();
  $(this).css("background-color","transparent");
   $('ul.list2 li:eq('+ind+')').css("background-color","transparent");
});

$("ul.list2>li").hover(function(){
    var ind=$(this).index();
   $(this).css("background-color","blue");
   $('ul.list1 li:eq('+ind+')').css("background-color","blue");
},
function(){
    var ind=$(this).index();
   $(this).css("background-color","transparent");
   $('ul.list1 li:eq('+ind+')').css("background-color","transparent");
});

以下是详细JSFiddle

Answer 3

$('li', 'ul.list1, ul.list2').hover(

function() {

    $('li:eq('+ $(this).index() +')', 'ul.list1, ul.list2').addClass('highlight');

},

function() {

    $('li:eq('+ $(this).index() +')', 'ul.list1, ul.list2').removeClass('highlight');

});

<强> DEMO