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

Answer 2

我最喜欢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。

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 COde

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

我的方法：

工作：

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

专业提示：

您可以使用array + each / 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" );
        }
        );   
});

悬停时滑动底线，颜色变化

5 个答案: