Question

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 200) {
      $(".nav-bg").css({
        "background": "#fff",
        "box-shadow": "0px 0px 4px #ddd"
      });
      $(".nav-link").addClass("link-color");
      $(".nav-item a").hover(function() {
        $(this).css("color", "#150945 !important");
      })
    } else {
      $(".nav-bg").css({
        "background": "transparent",
        "box-shadow": "none"
      });
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<li class="nav-item">
  <a href="#contact" class="nav-link pi">THOUGHTS</a>
</li>
<li class="nav-item">
  <a href="#contact" class="nav-link pi">CONTACT</a>
</li>

预期输出：悬停时，链接颜色应更改。问题是当我添加除颜色以外的任何其他属性时，它会起作用。但是当我添加颜色时，它不起作用。

Answer 1

这是因为!important关键字。您可以删除它，它将起作用。

您无需在内联CSS中指定!important。

$(document).ready(function(){
  $(window).scroll(function(){
    var scroll = $(window).scrollTop();
      if (scroll > 200) {
        $(".nav-bg").css({"background":"#fff","box-shadow":"0px 0px 4px #ddd"});
        $(".nav-link").addClass("link-color");
        $(".nav-item a").hover(function(){
          $(this).css("color", "red");
          })
        }
        else{
          $(".nav-bg").css({"background":"transparent","box-shadow":"none"});   
         }
 })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<br/><br/>Scroll &darr; <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<ul>
  <li class="nav-item">
   <a href="#contact" class="nav-link pi">THOUGHTS</a>
 </li>
  <li class="nav-item">
    <a href="#contact" class="nav-link pi">CONTACT</a>
  </li>
</ul>
<br/>

悬停时颜色不变

1 个答案: