冲突

Question

基本上我有3个环节，我使用悬停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已被禁用。任何帮助深表感谢，感谢

Answer 1

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

DEMO

或者仅仅@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'); 
}); 

DEMO

Answer 2

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

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

Answer 3

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

$('#nav-glob a').click(function(){ 
    var $this = $(this); 
    $this.parent().siblings().children('a').removeAttr("style"); 
    $this.css("color", "red"); 
});