jQuery URL matching for dual hover states

Question

I'm building a website that has two menus on one page, each with identical links but one menu is images with a hover state and the other a list.

What I need is to use jQuery to make each corresponding links to to show a hover state at the same time.

Meaning if you hove over an item in the list menu the link with the same url in the image menu should also show a hover state.

The only thing these menus have in common is matching urls so that is what jQuery would need to look for.

This is the page: http://www.chaseandsorensen.com/shop

Answer 1

$(".imagemenu a").hover(function() {
  current_url = this.href;
  $(".menu").find("a[href=" + current_url + "]").addClass("hoverClass);
});

I haven't tried it...

And I don't have idea to simulate the hover effect except adding the class.

Answer 2

Using matching classNames, here's one way:

.highlight { border:1px solid red }​

​<a href="test.html" class="first">First</a>
<a href="test2.html" class="second">Second</a>
​<br />
<a href="test.html" class="first">First</a>
<a href="test2.html" class="second">Second</a>

$("a").hover(function() {
    $('.' + $(this).attr('class')).addClass('highlight');
}, function() {
    $('.' + $(this).attr('class').split(' ')[1]).removeClass('highlight');
});​

Demo: http://jsfiddle.net/yY44H/2/