javascript - 下划线在鼠标悬停时展开

Question

我正在尝试使用 jquery 和 CSS 实现神奇的线条。但与其跟随并仅继承宽度，我希望它扩展到下一个索引项。

场景:

1:元素 one hover

ELEMENT ONE    ELEMENT TWO   ELEMENT THREE
___________

2:元素二悬停

ELEMENT ONE    ELEMENT TWO   ELEMENT THREE
__________________________

3:元素三悬停

ELEMENT ONE    ELEMENT TWO   ELEMENT THREE
__________________________________________

这是我到目前为止所得到的，但不幸的是我似乎无法让元素根据整个列表的宽度进行扩展。

        $('.carousel-image ul').slick({
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false,
          fade: true,
          asNavFor: '.carousel-info ul',
          adaptiveHeight: true,
          mobileFirst: true,
        });



        $('.carousel-info ul').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          asNavFor: '.carousel-image ul',
          dots: true,
          // centerMode: true,
          focusOnSelect: true
        });

        var $el, leftPos, newWidth,
          $mainNav = $(".carousel-info ul");

        $mainNav.append("<li id='magic-line'></li>");
        var $magicLine = $("#magic-line");

        $magicLine
          .width($(".carousel-info ul li.slick-current").width())
          .css("left", $(".carousel-info ul li.slick-current").position().left)
          .data("origLeft", $magicLine.position().left)
          .data("origWidth", $magicLine.width());


        $('.carousel-info ul').on('mouseenter', '.slick-slide', function(e) {
          var $currTarget = $(e.currentTarget);
          var index = $currTarget.data('slick-index');
          var slickObj = $('.carousel-image ul').slick('getSlick');

          slickObj.slickGoTo(index);

          var $el = $(".carousel-info ul li.slick-current");

          leftPos = $el.position().left;
          newWidth = $el.width();

          $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
          });

        });

#magic-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;
}
.carousel {
  position: relative;
  overflow: hidden;
  max-height: 42em;
}
.carousel .carousel-info {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 9;
  padding: 30px 0;
  opacity: .9;
  color: #fff;
  background-color: #37474f;
}
.carousel .carousel-info .container {
  border-width: 15px;
  border-top: 4px solid black;
}
.carousel .carousel-info ul {
  position: relative;
  max-width: 930px;
  margin-right: auto;
  margin-left: auto;
}
.carousel .carousel-info ul:after {
  display: block;
  clear: both;
  content: ' ';
}
.carousel .carousel-info li {
  float: left;
  width: 31.56342%;
  margin-right: 2.65487%;
}
.carousel .carousel-info li:last-child {
  float: right;
  width: 31.56342%;
  margin-right: 0;
}
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}
.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="carousel">
  <div class="carousel-image">
    <div class="container-big">
      <ul>
        <li>
          <img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+1&w=400&h=300" />
        </li>
        <li>
          <img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+2&w=400&h=300" />
        </li>
        <li>
          <img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+3&w=400&h=300" />
        </li>
      </ul>
    </div>
  </div>

  <div class="carousel-info">
    <div class="container">
      <ul>
        <li class="slick-current">
          <div class="c-header">About Us</div>
          <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
        </li>
        <li>
          <div class="c-header">Others</div>
          <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
        </li>
        <li>
          <div class="c-header">Main</div>
          <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
        </li>
      </ul>
    </div>
  </div>

</div>

Answer 1

您需要重新计算魔术线的宽度，而不是它的左侧位置 - 它始终 = 0；

$magicLine.stop().animate({
        left: 0,
        width: leftPos+newWidth
});

demo