Link the hover state on two elements

问题

I've got a list of links in a grid, and a vertical menu for those links off to the side. I'm trying to link these two sets so that when you hover over the item in the grid, the menu item will also highlight, and vice versa. Here's what I've got so far:

/* 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>

Related: Count the number of elements with a specific class, then add an ID that numbers them

回答1:

You can try this

$(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/

回答2:

Haven't tried, but this might work:

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

来源：https://stackoverflow.com/questions/11565094/link-the-hover-state-on-two-elements