javascript - flex CSS 菜单

Question

我有这个 css 菜单，当鼠标移开时，底线将跟随移动并返回原点

不过，定位有点奇怪。 任何人都知道如何将线居中到中间？

var activeOffset = $('nav ul .active').position().left;
var activeItemWidth = $('nav ul .active').width();

$('document').ready(function() {
  $('.dot').css('left', activeOffset + activeItemWidth / 2);;
});

$('nav').mouseout(function() {
  $('.dot').css('left', activeOffset + activeItemWidth / 2);

});

$('nav ul li').hover(function() {
  var navOffset = $(this).position().left;
  var navItemWidth = $(this).width();

  $('.dot').css('left', navOffset + navItemWidth / 2);

});

nav {
  position: fixed;
  top: 70px;
  left: 50%;
  width: 1024px;
  text-align: center;
  transform: translateX(-50%) translateY(0);
  -webkit-transform: translateX(-50%) translateY(0);
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul li {
  list-style: none;
  display: inline-block;
  oveflow: hidden;
}

nav ul li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  color: rgba(0, 0, 0, 1);
  /* -webkit-transform: translateX(-15%);
          transform: translateX(-15%);*/
  border-radius: 50px;
  /*  width: 130%;*/
  text-align: center;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
}

nav ul li a:hover {
  color: #da98b4;
}

nav ul li.active a {
  color: black;
}

nav .dot {
  background-color: #da98b4;
  width: 76px;
  height: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 25px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="dot"></div>
  <ul>
    <li class="active"><a href="#">AAAA</a></li>
    <li><a href="#">BBBB</a></li>
    <li><a href="#">CCCC</a></li>
    <li><a href="#">DDDD</a></li>
    <li><a href="#">EEEE</a></li>
    <li><a href="#">FFFF</a></li>
    <li><a href="#">GGGG</a></li>
    <li><a href="#">HHHH</a></li>
  </ul>
</nav>

Answer 1

var activeOffset = $('nav ul .active').position().left;
var activeItemWidth = $('nav ul .active').width();

$('document').ready(function() {
  $('.dot').css({
   'left' : activeOffset,
   'width' : activeItemWidth
});
});

$('nav').mouseout(function() {
 $('.dot').css({
   'left' : activeOffset,
   'width' : activeItemWidth
});

});

$('nav ul li').hover(function() {
  var navOffset = $(this).position().left;
  var navItemWidth = $(this).width();
$('.dot').css({
   'left' : navOffset,
   'width' : navItemWidth
});

});

nav {
  position: fixed;
  top: 70px;
  left: 50%;
  width: 1024px;
  text-align: center;
  transform: translateX(-50%) translateY(0);
  -webkit-transform: translateX(-50%) translateY(0);
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul li {
  list-style: none;
  display: inline-block;
  oveflow: hidden;
}

nav ul li a {
  display: block;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  color: rgba(0, 0, 0, 1);
  /* -webkit-transform: translateX(-15%);
          transform: translateX(-15%);*/
  border-radius: 50px;
  /*  width: 130%;*/
  text-align: center;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
}

nav ul li a:hover {
  color: #da98b4;
}

nav ul li.active a {
  color: black;
}

nav .dot {
  background-color: #da98b4;
  width: 76px;
  height: 8px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 25px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav>
  <div class="dot"></div>
  <ul>
    <li class="active"><a href="#">官方首页</a></li>
    <li><a href="#">老虎机</a></li>
    <li><a href="#">真人娱乐</a></li>
    <li><a href="#">捕鱼游戏</a></li>
    <li><a href="#">体育博彩</a></li>
    <li><a href="#">彩票游戏</a></li>
    <li><a href="#">火热优惠</a></li>
    <li><a href="#">特级贵宾</a></li>
  </ul>
</nav>

检查这个:)