时间戳

首页 > 解决方案 > 悬停时的颜色没有改变

javascript - 悬停时的颜色没有改变

问题描述

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

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

标签： javascriptjquerycss

解决方案

这是因为!important关键字。您可以删除它，它会工作。

您不需要!important在 inline css 中指定。

$(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/>

推荐阅读