jQuery滚动事件与CSS悬停相矛盾

Question

我的导航栏位于顶部，当我将鼠标悬停在链接上时， CSS悬停会将链接的颜色从白色变为小麦。

我还有jQuery代码，当用户滚动时会更改标题和链接的颜色。

所以问题是CSS悬停只能工作一次，一旦用户向上或向下滚动，CSS悬停就会停止工作，我希望CSS悬停一旦用户再次改变从白色到小麦的链接颜色滚动回顶部。

这是HTML

<header class = "header container-fluid  navbar navbar-fixed-top navbar-inverse">

<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Anime</a></li>
    <li><a href="#">Manga</a></li>
    <li><a href="#">Games</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li>
          <a data-toggle="modal" data-target="#myModal" >Log-In</a>

        </li>
        <li><a href="#">Sign-Up</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Watch Paralax</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->


<div class = "container">
<img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto">
</div>
</body>

CSS

body{
height: 2500px
}
img{
margin-top:130px;
border-radius:10px;
}

img::before{
content:"This is not working";
color:black;
font-size:200px;

}

.header{
padding: 20px 0;
box-shadow: 0 0 15px 2.6px rgba(0, 0, 0, 0.74);
background-color: rgba(1,1,1,.8);
transition-duration:2s;
}

.navbar-inverse .navbar-nav>li>a {
color: white;
font-size:20px;
transition:all .4s
}

.navbar-inverse .navbar-nav>li>a:hover {
color: wheat;
text-shadow:0 0 2px white
}

.navbar-inverse .navbar-brand {
color: white;
font-size:50px;
transition:all .4s
}

.navbar-inverse .navbar-brand:hover{
color:wheat;
text-shadow:0 0 2px white
}

的jQuery

var a = $(".header").offset().top;

$(document).scroll(function(){
if($(this).scrollTop() > a)
{  $('.navbar-inverse .navbar-brand').css({"color":"black"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"black"});
   $('.header').css({"background":"white"});
} else {
   $('.navbar-inverse .navbar-brand').css({"color":"white"});
   $('.header').css({"background":"rgba(1,1,1,.8)"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"white"});
}
});

我尝试了removeAttr("style")，它只是完全删除了样式

Answer 1

您可以在：悬停状态（如下面的代码段中）中使用！important

.navbar-inverse .navbar-nav>li>a:hover {
  color: red!important;
}

或重置样式而不是硬编码（如jsfiddle示例中所示）。您可以使用以下方式执行此操作：

$('.navbar-inverse .navbar-nav>li>a').css({ "color": "" });

https://jsfiddle.net/o5s0015p/1/

Answer 2

我喜欢来自Tibi的!important标签，除非您不在顶部时想要不同的悬停样式。要在顶部使用单独的悬停颜色，否则你可以在滚动位于顶部时使用jQuery添加样式，但是请确保在jQuery中为if和else添加所需的样式：

$('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"wheat"});},function(){$(this).css({"color":"white"});});

和

 $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});

以下是工作示例：

＆＃13;

＆＃13;

var a = $(".header").offset().top;

$(document).scroll(function(){
if($(this).scrollTop() > a)
{  $('.navbar-inverse .navbar-brand').css({"color":"black"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"black"});
   $('.header').css({"background":"white"});
   $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"blue"});}, function(){$(this).css({"color":"balck"});});
   $('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"blue"});}, function(){$(this).css({"color":"black"});});
} else {
   $('.navbar-inverse .navbar-brand').css({"color":"white"});
   $('.header').css({"background":"rgba(1,1,1,.8)"});
   $('.navbar-inverse .navbar-nav>li>a').css({"color":"white"});
   $('.navbar-inverse .navbar-brand').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});
   $('.navbar-inverse .navbar-nav>li>a').hover(function(){$(this).css({"color":"wheat"});}, function(){$(this).css({"color":"white"});});
}
});

＆＃13;

body{
height: 2500px
}
img{
margin-top:130px;
border-radius:10px;
}

img::before{
content:"This is not working";
color:black;
font-size:200px;

}

.header{
padding: 20px 0;
box-shadow: 0 0 15px 2.6px rgba(0, 0, 0, 0.74);
background-color: rgba(1,1,1,.8);
transition-duration:2s;
}

.navbar-inverse .navbar-nav>li>a {
color: white;
font-size:20px;
transition:all .4s
}

.navbar-inverse .navbar-nav>li>a:hover {
color: wheat;
text-shadow:0 0 2px white
}

.navbar-inverse .navbar-brand {
color: white;
font-size:50px;
transition:all .4s
}

.navbar-inverse .navbar-brand:hover{
color:wheat;
text-shadow:0 0 2px white
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class = "header container-fluid  navbar navbar-fixed-top navbar-inverse">

<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">            
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Anime</a></li>
    <li><a href="#">Manga</a></li>
    <li><a href="#">Games</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li>
          <a data-toggle="modal" data-target="#myModal" >Log-In</a>

        </li>
        <li><a href="#">Sign-Up</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Watch Paralax</a></li>
      </ul>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->


<div class = "container">
<img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto">
</div>

＆＃13;

＆＃13;

＆＃13;