將懸停狀態鏈接到兩個元素上

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'); 
});