Question

首先，我想解释一下我想要做什么，我想在滚动时更改某个CSS样式的值，即border-bottom-color。但问题是，当其他风格正常工作时，它无法正常工作.navbar-inverse .navbar-nav>li>a。有人能解释我为什么不工作吗？我是HTML和CSS的新手。

＆＃13;

$(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)");
    }
  })
})

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我建议使用CSS而不是jquery，如下所示

＆＃13;

$(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");
    }
  });
  
})

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试像这样更改您的脚本

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

  if (this.scrollTop > 147) {
      // change color here
  } else {
      // change color here
  }

});

Answer 3

我建议你为这两种情况定义一个单独的样式，即.navbar-menuitem和.navbar-menuitem-scrolled或类似的东西。然后使用Javascript从您要定位的项目中添加或删除该类。

您在jQuery中尝试做的是针对元素可能状态的CSS。除非元素已处于悬停状态，否则jQuery无权访问它。 jQuery用于操作当前状态的元素，而不是它们的样式表，尽管它可以访问当前应用的样式。

使用.addClass()和。removeClass()方法解决您的问题。请记住使用.hasClass()，这样在向上和向下滚动页面时就不会将该类添加十亿次。

Answer 4

你不能在脚本选择器上使用：hover css。您可以使用jquery hover()或mouseover()来实现此目的。像下面的东西

$('.navbar-nav>li>a').hover(function(){
    if(scroll>36){
       //change border-color
    }
    else{
      //change border-color
    }
});

滚动时更改CSS样式的值

4 个答案: