懸停不工作使用jquery

Question

我正在使用下面的jQuery代碼來更改導航欄背景。另外我需要改變一些字體顏色。問題是，從這段代碼懸停是行不通的。爲什麼？

$(window).scroll(function(){ 
var top=$(window).scrollTop() 
if(top>10){ 
    $('.navbar').css('background-color','#ffffff'); 
    $('.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus').css('border','2px solid #d3041c'); 
    $('.navbar-default .navbar-nav > li > a:hover').css('color','#da2027');  
    $('.navbar-default .navbar-nav > li > a:link').css('color','#777777'); 
} 
else{ 
    $('.navbar').css('background-color','rgba(0, 0, 0, 0.0)');  
    $('.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus').css('border','2px solid #ffffff'); 
    $('.navbar-default .navbar-nav > li > a:link').css('color','#ffffff'); 
    $('.navbar-default .navbar-nav > li > a:hover').css('color','#da2027'); 
} 

    }) 

Answer 1

您正試圖選擇所有懸停的元素並更改它們的字體顏色，但在滾動期間沒有任何懸停。您可以改爲創建兩個CSS類，然後將它們添加到li元素中

$('.navbar-default .navbar-nav > li').addClass('class1'); 
$('.navbar-default .navbar-nav > li').removeClass('class2'); 

.class1 a:hover{ 
    color: #da2027; 
} 
.class1 a:link{ 
    color: #ffffff; 
} 
.class2 a:hover{ 
    color: #777777; 
} 
.class2 a:link{ 
    color: #da2027; 
}