悬停无法使用 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

您正在尝试 select 所有悬停的元素并更改它们的字体颜色，但在滚动期间没有任何悬停。您可以改为创建两个 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;
}

悬停无法使用 jquery

Hover not working using jquery

jquery

hover

scrolltop