如何保持“悬停”状态？滚动时使用Jquery颜色更改效果时的效果

Question

我正在尝试创建导航栏的效果，其滚动时文本更改颜色。问题是，一旦你开始滚动，用css完成的悬停效果就不再起作用了。 有谁知道如何解决这个问题？

这是我的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  var scroll_pos = 0;
  $(document).scroll(function() {
    scroll_pos = $(this).scrollTop();
    if (scroll_pos > 600) {

      $(".normalmenuitem").css('color', '#a9a9a9');
    } else {

      $(".normalmenuitem").css('color', '#5f666f');
    }
  });
});

＆＃13;

body {
  min-height: 4000px;
}
.box {
  background-color: #fff;
  position: absolute;
  height: 59px;
  width: 100%;
  top: 0;
}
.navigationmenu {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
}
#logo {
  transform: translateY(-50%);
  position: absolute;
  top: 29px;
  left: 17px;
  width: 160px;
}
/* top right menu! */

.holderrr {
  position: absolute;
  top: 10px;
  right: 0px;
}
.rightmenu {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-family: sourcesanspro-semibold;
  font-size: 15px;
  padding: 6px 17px 6px 17px;
}
.normalmenuitem {
  padding: 6px 17px 6px 17px;
  text-decoration: none;
  color: #5f666f;
  transition: .3s color;
}
.normalmenuitem:hover {
  color: #292f36;
}
#trial {
  color: #e16065;
}
#trial:hover {
  color: #d64f54;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationmenu">

  <div class="box"></div>

  <div class="nav">
    <a href="http://braemo.com">
      <img id='logo' src="http://images8.webydo.com/92/9273203/3958%2f4F9144FD-A273-B76D-94C9-3D8B569C8993.png">
    </a>
  </div>

  <div class="holderrr">
    <div class="rightmenu">
      <a class="normalmenuitem" href='http://braemo.com/support.html'>Features</a>
      <a class="normalmenuitem" href='http://braemo.com/support.html'>Pricing</a>
      <a class="normalmenuitem" href='http://braemo.com/support.html'>Stories</a>
      <a class="normalmenuitem" href='http://braemo.com/support.html'>Blog</a>
      <a class="normalmenuitem" href='http://braemo.com/support.html'>Language</a>
      <a class="normalmenuitem" href='http://braemo.com/support.html'>Support</a>
      <a class="normalmenuitem" href='http://dashboard.braemo.com'>Log In</a>
      <a class="rightmenu" id="trial" href='http://braemo.com/pricing.html'>Start Free Trial</a>
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的问题是Jquery会覆盖CSS，如果您希望CSS再次覆盖Jquery，则必须使用!important，例如：

.normalmenuitem:hover {
  color: #292f36 !important;
}

以下是一个工作示例https://jsfiddle.net/jL2z8yy4/