jQuery/CSS - 在具有相同href的元素上悬停时更改css类答案

【问题标题】：jQuery/CSS - Change css class on hover on elements with same hrefjQuery/CSS - 在具有相同href的元素上悬停时更改css类
【发布时间】：2011-09-01 08:16:51
【问题描述】：

我有两个单独的 UL 作为菜单。当我悬停第一个菜单项时，我希望第二个菜单项更改文本颜色。也许是一个解决方案，其中与您悬停的链接具有相同 href 的链接更改 css 类？我怎么能用 jQuery 做到这一点？

<ul class="firstMenu jQueryHover">
 <li><a href="href1">bla</a></li>
 <li><a href="href2">bla2</a></li>
</ul>

<ul class="secondMenu">
 <li><a href="href1">blabla (same href as firstMenu item you hovered changes this elements css class)</a></li>
 <li><a href="href2">blabla (same href as firstMenu item you hovered changes this elements css class)</a></li>
</ul>

【问题讨论】：

标签： javascript jquery css hover

【解决方案1】：

如果您想影响所有具有相同href 的链接，包括悬停在上面的链接：

$("a").hover(function() {
    $("a[href='" + $(this).attr("href") + "']").addClass("yourClass"); 
}, function() {
    $("a[href='" + $(this).attr("href") + "']").removeClass("yourClass");
});

这利用attribute name selector，找到与当前悬停的链接具有相同href 的所有链接。

这是一个有效的example。

如果您想让它只更改其他链接（而不是悬停的链接），那么您可以使用 jQuery not 方法来排除悬停的元素。从您的问题中不清楚您是否希望所有具有相同 href 的链接都更改，或者所有其他链接但不是当前悬停的链接。

$("a").hover(function() {
    $("a[href='" + $(this).attr("href") + "']").not(this).addClass("yourClass");
}, function() {
    $("a[href='" + $(this).attr("href") + "']").not(this).removeClass("yourClass");
});

【讨论】：

太棒了！谢谢！是的，这是我需要的第二个（只有第二个菜单更改）..但是我如何修改它以改为在类上工作，它应该添加和删除一个类而不是硬编码一个 css 颜色值？ jsfiddle.net/HDSnC/4
@Emin - 再看看，我已经改了。抱歉，从小提琴复制时将其保留为 css（我只是懒得为他们编写 CSS 类！）但打算将其更改为 addClass 和 removeClass。
好的，没关系。但我的意思是，如何使用类名作为触发器将两个菜单项链接在一起。看看这个链接，你就会明白我在做什么:) jsfiddle.net/HDSnC/4
啊，我想我明白你的意思了。看到这个更新的小提琴：jsfiddle.net/interdream/HDSnC/5
是的，就是这样。但是第二个菜单上的第一个项目（有两个 css 类的那个）有一个小错误。当我在我的网站上运行它时，我在控制台中收到此错误：“错误：未捕获的异常：语法错误，无法识别的表达式：。”，并且类添加不起作用（但它似乎适用于 jsFiddle）。 jsfiddle.net/HDSnC/6

【解决方案2】：

更改所有具有相同href的锚标记

$("a").hover(function() {
    $("a[href='" + $(this).attr("href") + "']").addClass("hover-class-name"); 
}, function() {
    $("a[href='" + $(this).attr("href") + "']").removeClass("hover-class-name");
});

但是，我看不出您为什么要在页面上有两个具有相同href 的链接？您是否考虑过使用类名而不是 href 来链接锚点？

【讨论】：

我认为他想在链接悬停时为页面的另一部分设置动画。
是的。类名作为触发器而不是 href 属性可能会更聪明:) 我该怎么做？
与上面的示例相同，但将 href 替换为 class 参见此处以获取工作示例 jsfiddle.net/wRLG7

【解决方案3】：

应该很简单：

$(".jQueryHover a").hover(function(){
   if($(this).hasClass("hovering"))
      {
         $(this).removeClass("hovering");
         $('a[href="'+$(this).attr('href')+'"]').removeClass("hovering");
      }
   else {
      $(this).addClass("hovering");
      $('a[href="'+$(this).attr('href')+'"]').addClass("hovering");
   }
});

Example

【讨论】：

【解决方案4】：

你可以这样做：

$('.firstMenu ').hover(function(){
    var href = $(this).attr('href');
    $('.secondMenu  a[href='+href+']').addClass('newClass');
},
function(){
    var href = $(this).attr('href');
    $('.secondMenu  a[href='+href+']').removeClass('newClass');
}
);

【讨论】：