高亮项目时鼠标悬停

Question

我有两个<ul>名单：

Item 1  A5 
Item 2  A4 
Item 3  A2 
Item 4  A1 
Item 5  A3 

我会在哪里开始写，当我将鼠标悬停在任何<li>任一列表中的代码，它会突出项目中第一个列表和第二个列表中的相应A。

例如，在列表1悬停在“第3项”应该在列表2

大亮点是都和“A3”：该号码没有出现在列表中的文本，这是只是为了帮助解释。实际的HTML看起来像这样：

<ul class="list1"> 
    <li id="qq1">dfgfdgfdg</li> 
    .... 
</ul> 

<ul class="list2"> 
    <li id="aa1">cvbcvbcvb</li> 
    .... 
</ul> 

Answer 1

如果你的ID将留在该格式，则：

$(".list1 li, .list2 li").hover(function() { 
    var n = this.id.substr(2); 
    $("#qq" + n + ", #aa" + n).toggleClass("highlight"); 
}); 

演示：http://jsfiddle.net/e37Yg/

Answer 2

$('li#item3').hover(function(){ 
    $(this, '#A3', '#B1').addClass('hilite'); 
},function(){ 
    $(this, '#A3', '#B1').removeClass('hilite'); 
}); 

Answer 3

$('.list1 li,.list2 li').hover(function() { 
    $(this).addClass('hovered') 
     .siblings() 
     .removeClass('hovered'); 
    $($(this).closest('ul').is('.list1')?'.list2 li':'.list1 li').eq($(this).index()) 
     .addClass('hovered') 
     .siblings() 
     .removeClass('hovered'); 
}); 

demo