jQuery URL matching for dual hover states

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 on开发者_JS百科ly 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

---

For those searching for a Mootools sollution:

$$('a').addEvent('mouseenter', function(e){
        var dual_link = $$('.'+this.get('class'));
        dual_link.addClass('highlight');
        dual_link.addEvent('mouseleave', function(e){
            dual_link.removeClass('highlight');
        });
});

This is the last post converted for Mootools:

$$('a').addEvents({
    mouseenter : function(e){ $$('.'+this.get('class')).addClass('highlight');},
    mouseleave : function(e){
        $$("."+this.get('class').split(" ")[0]).removeClass('highlight');}
});

After the split you can use [0] or [1] it works either way. The first example was to avoid using the split.

---

$(".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.

---

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/