jQuery/CSS - 改变悬停在具有相同href的元素上的CSS类

我有两个独立的UL作为菜单。当我悬停第一个菜单项时，我希望第二个菜单项改变文本颜色。也许一个解决方案，其链接与你所链接的链接具有相同的href更改css类？我怎么能用jQuery来做到这一点？jQuery/CSS - 改变悬停在具有相同href的元素上的CSS类

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

来源

2011-09-01 Emin

你可以这样做：

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

来源

2011-09-01 08:21:14

如果你想影响所有使用相同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方法来排除悬停的元素。从你的问题中不清楚你是否想要改变所有的链接，或者所有其他链接，或者所有其他链接，但不是当前悬停的链接。

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

来源

2011-09-01 08:23:19

太神奇了！谢谢！是的，这是我需要的第二个（只有第二个菜单改变）..但我怎么能修改这个工作在类而不是，它应该添加和删除一个类，而不是硬编码一个CSS颜色值？ http://jsfiddle.net/HDSnC/4/ – Emin

@Emin - 再看一次，我改变了它。对不起，当从小提琴复制时将其留作'css'（我不想为他们编写CSS类而烦心！），但意味着将其更改为'addClass'和'removeClass'。 –

好吧，那很好。但我的意思是，我如何使用类名作为触发器将两个菜单项链接在一起。看看这个链接，你会明白我在做什么:) http://jsfiddle.net/HDSnC/4/ – Emin

再以同样的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来链接锚？

来源

2011-09-01 08:26:09

我想他想在链接悬停时为页面的另一部分制作动画。 – rgin

是的。类名称作为触发器而不是href属性可能会更聪明:)我该怎么做？ – Emin

就像上面的例子一样，但用'class'替换'href'，参见这里的工作示例http://jsfiddle.net/wRLG7/ –

应该很简单：

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

来源

2011-09-01 08:30:45 Nivas

jQuery/CSS - 改变悬停在具有相同href的元素上的CSS类

回答

相关问题