jquery - 悬停滑动底线，颜色变化

Question

当悬停在链接上时，滑动线的 color 不会改变，但我希望它与上面链接的 color 相匹配。我该怎么做？

$(function() {
  $("#example-one").append("<div id='slider'></div>");

  var $slider = $("#slider");

  $slider
    .width($(".current_page").width())
    .css("left", $(".current_page a").position().left)
    .data("origLeft", $slider.position().left)
    .data("origWidth", $slider.width());

  $("#example-one div").find("a").hover(function() {
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $slider.stop().animate({
      left: leftPos,
      width: newWidth
  });
}, function() {
     $slider.stop().animate({
       left: $slider.data("origLeft"),
       width: $slider.data("origWidth")
     });    
   });
});

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arrial Narrow;
  background: #2F2626;
}

#nav { 
  margin: 15px;
}

#example-one { 
  list-style: none;
  position: relative;
  word-spacing: 15px;
}

#example-one div { 
  display: inline-block;  
}

#example-one a { 
  color: white; 
  font-size: 18px; 
  float: left;
  text-decoration: none;
  text-transform: uppercase;
}

#slider { 
  position: absolute;
  bottom: -1px; 
  left: 0; 
  height: 1px; 
  background: red;
}

.current_page a { 
  color: red !important; 
}

.blue a:hover { 
  color: blue !important; 
}

.orange a:hover { 
  color: orange !important; 
}

.yellow a:hover { 
  color: yellow !important; 
}

.lime a:hover { 
  color: lime !important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav">
  <div id="example-one">
    <div class="current_page"><a href="#">Home</a></div>
    <div class="blue"><a href="#">About</a></div>
    <div class="orange"><a href="#">Service</a></div>
    <div class="yellow"><a href="#">Portfolio</a></div>
    <div class="lime"><a href="#">Contact</a></div>
  </div>
</div>

Answer 1

只需使用特定的 CSS 规则:

.yellow:hover ~ #slider {
    background: yellow !important;
}

SEE jsFiddle