Link the freeze state on two elements

Question

I have a list of links in the grid and a vertical menu for these links to the side. I am trying to relate these two sets so that when you hover over an item in the grid, the menu item also highlights, and vice versa. Here is what I have 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 identifier that their numbers

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

Answer 2

Did not try, but this may work:

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