Link the hover state on two elements

Question

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

score 1 · Answer 1 · answered Jul 19 '12 at 16:27

1

Haven't tried, but this might work:

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

answered Jul 19 '12 at 16:27

yoeriboven

3,541
3
25
40

score 0 · Accepted Answer · answered Jul 19 '12 at 16:33

0

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/

answered Jul 19 '12 at 16:33

wirey00

33,517
7
54
65

Thanks for filling in those missing pieces. I have to modify your code to be more specific in case new items are added or reordered in the future. But I'm still having trouble reversing this method. I also need the grid to highlight when the links are hovered. http://jsfiddle.net/LN2VL/19/ – John Shaw Jul 19 '12 at 17:25

Link the hover state on two elements

2 Answers2

Linked