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

悬停不使用jquery工作

1 个答案: