Question

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

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

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

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

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

Answer 1

对于那些寻找Mootools溶剂的人：

$$('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]，无论哪种方式都可以。第一个例子是避免使用拆分。

Answer 2

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

我还没试过......

除了添加类之外，我无法模拟悬停效果。

Answer 3

使用匹配的classNames，这是一种方式：

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

双悬停状态的jQuery URL匹配

3 个答案: