基本上我有 3 个链接,当用户进入/离开链接区域时,我使用 hover css 属性使它们变为白色/红色:
<div id="nav-glob">
<ul>
<!--menu-->
<li class="nav-home"><a href="#content">Home</a></li>
<li class="nav-portfolio"><a href="#lavori">Portfolio</a></li>
<li class="nav-contact"><a href="#footer">Contact</a></li>
</ul>
</div>
.nav-glob a:hover {
color: red;
}
然后在 jQuery 中我使用 click()
函数将 css color
属性设置为红色:
$('.nav-home > a').click(function(){
$(".nav-home a").css("color", "red");
$(".nav-contact a").css("color", "white");
$(".nav-portfolio a").css("color", "white");
});
$('.nav-portfolio > a').click(function(){
$(".nav-home a").css("color", "white");
$(".nav-contact a").css("color", "white");
$(".nav-portfolio a").css("color", "red");
});
$('.nav-contact > a').click(function(){
$(".nav-home a").css("color", "white");
$(".nav-contact a").css("color", "red");
$(".nav-portfolio a").css("color", "white");
});
问题是这是第一次工作正常:单击一个链接后,hover
CSS 属性将被忽略!看起来 hover
在点击后被禁用了。非常感谢任何帮助,谢谢
最佳答案
为不同的 a
标签状态尝试一些 CSS:
a.clicked {
color: #f00;
}
a.hovered{
color: #f00 !important;
}
a.faded {
color: #fff
}
$('#nav-glob ul li a').hover(function() {
$(this).parent().siblings('li').find('a').removeClass('hovered');
$(this).addClass('hovered');
}, function() {
$(this).parent().siblings('li').find('a').removeClass('hovered');
$(this).removeClass('hovered');
}).click(function(e) {
e.preventDefault();
$('#nav-glob ul li a').removeClass('faded');
$(this).parent().siblings('li').find('a').addClass('faded');
$(this).addClass('clicked');
});
或者正如@Blazemonger所说
a.faded {
color: #fff
}
a.clicked {
color: #f00;
}
a:hover{
color: #f00 !important;
}
$('#nav-glob ul li a').click(function(e) {
e.preventDefault();
$('#nav-glob ul li a').removeClass('faded');
$(this).parent().siblings('li').find('a').addClass('faded');
$(this).addClass('clicked');
});
关于jquery - jQuery .css() 和 CSS 悬停属性之间的冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10725333/