将悬停状态链接到两个元素上

Question

我有一个网格中的链接列表和一个垂直菜单，用于链接到一边。我试图链接这两组，这样当你将鼠标悬停在网格中的项目上时，菜单项也会突出显示，反之亦然。下面是我到目前为止有：

/* Grid */ 
<div class="pos-content count1"></div> 
<div class="pos-content count2"></div> 
<div class="pos-content count3"></div> 

/* Menu */ 
<ul> 
<li class="item177">Menu Link 1</li> 
<li class="item178">Menu Link 2</li> 
<li class="item179">Menu Link 3</li> 
</ul> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('div.count1').click(function() { 
     $("#item177").trigger("mouseover"); 
    }); 
}); 
</script> 

相关：Count the number of elements with a specific class, then add an ID that numbers them

Answer 1

你可以试试这个

$(document).ready(function() { 
    $('div').hover(function() { 
     $("ul li").eq($(this).index()).trigger("mouseover"); 
    }, function() { 
     $("ul li").eq($(this).index()).trigger("mouseout"); 
    }); 

    $('ul li').hover(function() { 
     $(this).css('background-color', 'red'); 
    }, function() { 
     $(this).css('background-color', 'white'); 
    }); 
});​ 

http://jsfiddle.net/LN2VL/

Answer 2

没有尝试过，但是这可能工作：

$('.count1').hover(function(){ 
    $('#item77').addClass('highlight'); 
}, function(){ 
    $('#item77').removeClass('highlight'); 
});