衝突

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