在懸停時滑動底線，顏色變化

Question

當懸停在鏈接上時，滑動線的顏色不會改變，但我希望它與上面鏈接的顏色相匹配。我怎樣才能做到這一點？

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

只需使用specifc CSS規則：

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

SEE jsFiddle

Answer 2

我的方法：

工作：

http://jsfiddle.net/skozz/YW24L/1/

臨提示：

可以使用陣列+每一/ for循環重構這個代碼。

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

    $('.blue').hover() 


     $(".blue").hover(
     function() { 
      $('#slider').css("background", "blue"); 
     } 
     ); 

     $(".orange").hover(
     function() { 
      $('#slider').css("background", "orange"); 
     } 
     ); 

     $(".yellow").hover(
     function() { 
      $('#slider').css("background", "yellow"); 
     } 
     ); 
     $(".lime").hover(
     function() { 
      $('#slider').css("background", "lime"); 
     } 
     ); 
}); 

Answer 3

這裏有一些更簡單：Fiddle

$(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 
     }); 
     $slider.css('background', $(this).parent().prop('class')); 
    }, function() { 
     $slider.stop().animate({ 
      left: $slider.data("origLeft"), 
      width: $slider.data("origWidth") 
     }); 
     $slider.css('background', 'red');  
    }); 
}); 

Answer 4

這裏是更新代碼：

新的CSS

#slider.blue { 
background-color: blue; 
} 

#slider.orange { 
background-color: orange; 
} 

#slider.yellow { 
background-color: yellow; 
} 

#slider.lime { 
background-color: lime; 
} 

JS代碼

$(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, 
     }).addClass($(this).parent().attr('class')); 
    }, function() { 
     $slider.stop().animate({ 
      left: $slider.data("origLeft"), 
      width: $slider.data("origWidth") 
     }).removeAttr('class');  
    }); 
}); 

Updated Fiddle

Answer 5

我喜歡A.Wolff最好的CSS的解決方案，但在這裏是一種替代方法。

這些更改只能在您的jQuery代碼中進行。

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

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

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

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

     $slider.stop().animate({ 
      left: leftPos, 
      width: newWidth 
     }).css('background-color', $el.css("color")); 
    }, function() { 
     $slider.stop().animate({ 
      left: $slider.data("origLeft"), 
      width: $slider.data("origWidth") 
     }).css('background-color', $slider.data("origColor"));;  
    }); 
}); 

檢查您的updated Fiddle。