javascript - 滚动时更改CSS样式的值

Question

首先我想解释一下我想做什么，我想改变某个CSS样式的值，即滚动时的border-bottom-color。但问题是，它不工作，而另一种样式正在工作 .navbar-inverse .navbar-nav>li>a。有人可以向我解释为什么它不起作用吗？我是 HTML 和 CSS 的新手。

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 36) {
      $(".navbar-inverse .navbar-nav>li>a").css("color", "white"); //Working
      $(".navbar-inverse .navbar-nav>li>a:hover").css("border-bottom-color", "white");
    } else {
      $(".navbar-inverse .navbar-nav>li>a").css("color", "black"); //Working
      $(".navbar-inverse .navbar-nav>li>a:hover").css("border-bottom-color", "rgb(2,1,131)");
    }
  })
})

.navbar-inverse .navbar-nav>li>a {
  color: black;
  padding-top: 80px;
  padding-left: 30px;
  font-weight: bold;
  border-bottom: 3px solid transparent;
  transition: border-bottom-color 0.5s ease-in-out;
  -webkit-transition: border-bottom-color 0.5s ease-in-out;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: rgb(2, 1, 131);
  border-bottom-color: rgb(2, 1, 131);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a>
      <img src="img/gear.png" class="gear" width="15px">
      <img src="img/lightning.png" class="lightning" width="25px">
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Clients</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Team</a></li>
        <li><a href="#">HR Express</a></li>
        <li><a href="#">Activities</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

我建议像下面这样使用 CSS 而不是 jquery

$(document).ready(function() {

  $(".navbar-inverse .navbar-nav>li>a").mouseover(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 36) {
      $(this).css("color", "red"); //Working
      $(this).css("border-bottom-color", "rgb(2, 1, 131)");
    } else {
      $(this).css("color", "black"); //Working
      $(this).css("border-bottom-color", "rgb(2,1,131)");
    }
  });
  
  $(".navbar-inverse .navbar-nav>li>a").mouseleave(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 36) {
      $(this).css("color", "black"); 
      $(this).css("border-bottom-color", "transparent");
    } else {
      $(this).css("color", "black");
      $(this).css("border-bottom-color", "transparent");
    }
  });
  
})

.navbar-inverse .navbar-nav>li>a {
  color: black;
  padding-left: 30px;
  font-weight: bold;
  border-bottom: 3px solid transparent;
  transition: border-bottom-color 0.5s ease-in-out;
  -webkit-transition: border-bottom-color 0.5s ease-in-out;
}

.navbar-inverse .navbar-nav>li>a:hover {
  color: rgb(2, 1, 131);
  border-bottom-color: rgb(2, 1, 131);
}

body {
  height: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="36">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="http://www.serbizcooperative.com/"><img src="img/logo.png" class="logo" width="400px"></a>
      <img src="img/gear.png" class="gear" width="15px">
      <img src="img/lightning.png" class="lightning" width="25px">
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Careers</a></li>
        <li><a href="#">Clients</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Team</a></li>
        <li><a href="#">HR Express</a></li>
        <li><a href="#">Activities</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
</nav>