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>
答
你可以这样做:
$('.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');
}
);
答
如果你想影响所有使用相同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");
});
答
再以同样的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来链接锚?
答
应该很简单:
$(".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");
}
});
太神奇了!谢谢!是的,这是我需要的第二个(只有第二个菜单改变)..但我怎么能修改这个工作在类而不是,它应该添加和删除一个类,而不是硬编码一个CSS颜色值? http://jsfiddle.net/HDSnC/4/ – Emin
@Emin - 再看一次,我改变了它。对不起,当从小提琴复制时将其留作'css'(我不想为他们编写CSS类而烦心!),但意味着将其更改为'addClass'和'removeClass'。 –
好吧,那很好。但我的意思是,我如何使用类名作为触发器将两个菜单项链接在一起。看看这个链接,你会明白我在做什么:) http://jsfiddle.net/HDSnC/4/ – Emin