4

基本上我有 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()函数将 csscolor属性设置为红色：

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

问题是第一次运行良好：单击一个链接后，hoverCSS 属性被忽略！单击后似乎hover已禁用该功能。非常感谢任何帮助，谢谢

4

3 回答 3

3

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

演示

于 2012-05-23T17:59:42.720 回答
2

尝试将您的:hover属性设置为!important，它们应该覆盖内联样式。

或者，如果您不喜欢使用!important，您可以使用.toggleClass()来添加和删除特定类，而不是直接更改内联 CSS 样式。

于 2012-05-23T18:00:37.817 回答
0

内联样式覆盖样式表样式。这是预期的行为。不要将颜色设置回默认值，而是删除样式属性，以便重新控制样式表。

$('#nav-glob a').click(function(){
    var $this = $(this);
    $this.parent().siblings().children('a').removeAttr("style");
    $this.css("color", "red");
});
于 2012-05-23T18:03:17.783 回答