双悬停状态的jQuery URL匹配

Question

我正在构建一个网站，在一个页面上有两个菜单，每个菜单都有相同的链接，但一个菜单是带有悬停状态的图像，另一个菜单是列表。

我需要的是使用jQuery使每个对应的链接来同时显示悬停状态。

如果您在列表菜单中的某个项目上滚动，则图像菜单中具有相同网址的链接也应显示悬停状态。

这些菜单唯一的共同点就是匹配url，这是jQuery需要查找的内容。

这是网页：http://www.chaseandsorensen.com/shop

Answer 1

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

我还没有尝试过...

而且我也没有主意，模拟，只是加入了类悬停效果。

Answer 2

使用匹配的类别名称，这里有一个方法：

.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'); 
});​ 

演示：http://jsfiddle.net/yY44H/2/

Answer 3

对于那些寻找一个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'); 
     }); 
}); 

这是最后转换为MooTools的帖子：

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

拆分后，您可以使用[0]或[1]以任何方式工作。第一个例子是避免使用拆分。