悬停动画后将边框移动到下一个 li

Question

我创建了一个有 4 里的导航栏并且处于活动状态 class

现在我想当我悬停在第二里时，我的边框底部随着动画从第一里移动到第二里

这是我的导航栏代码：

.top-bar {
background:#0d0d0d;
width:100%;
height:85px;
position:fixed;
top:0;
z-index:99999;
}

.menu {
    float: right;
    margin: 16px 50px;
}
.menu li {
    float: right;
    color: #FFF;
    list-style: none;
    font-size: 18px;
    padding: 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    height: 36px; 
}

.menu li:hover {color:#8cc152;}

.active {
border-bottom:3px solid #8cc152;
color:#8cc152 !important;
}
.hvr {
position:relative;
}
.hvr:before {
    content: '';
    width: 5px;
    height: 5px;
    background: #8cc152;
    position: absolute;
    margin-top: 48px;
    transform: rotate(45deg);
 right:50%;
}

<div class="top-bar">
<div class="menu">
<a href="#"><li class="active hvr"> Menu </li></a>
<a href="#"><li> Menu </li></a>
<a href="#"><li> Menu </li></a>
<a href="#"><li> Menu </li></a>
</div>
<div class="logo"></div>
</div>

我没有任何演示或示例。你能帮帮我吗？

Answer 1

使用 jquery 的 .hover 函数在悬停特定菜单项时对菜单项应用激活效果。

请检查下面的工作片段。

$(".menu a").hover(function(){
  $(".menu").find('li').removeClass('active').removeClass('hvr');
  $(this).find('li').addClass('active').addClass('hvr');
},function(){
  $(this).find('li').removeClass('active').removeClass('hvr');
});

.top-bar {
background:#0d0d0d;
width:100%;
height:85px;
position:fixed;
top:0;
z-index:99999;
}

.menu {
    float: right;
    margin: 16px 50px;
}
.menu li {
    float: right;
    color: #FFF;
    list-style: none;
    font-size: 18px;
    padding: 15px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    height: 36px; 
}

.menu li:hover {color:#8cc152;}

.active {
border-bottom:3px solid #8cc152;
color:#8cc152 !important;
}
.hvr {
position:relative;
}
.hvr:before {
    content: '';
    width: 5px;
    height: 5px;
    background: #8cc152;
    position: absolute;
    margin-top: 48px;
    transform: rotate(45deg);
 right:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-bar">
<div class="menu">
<a href="#"><li class="active hvr"> Menu </li></a>
<a href="#"><li> Menu </li></a>
<a href="#"><li> Menu </li></a>
<a href="#"><li> Menu </li></a>
</div>
<div class="logo"></div>
</div>

Answer 2

试试这个代码

$(function(){
 var menu = $(".menu");
  var indicator = $('<span class="indicator"></span>');
  menu.append(indicator);
  position_indicator(menu.find("li.active"));  
  setTimeout(function(){indicator.css("opacity", 1);}, 500);
  menu.find("li").mouseenter(function(){
   position_indicator($(this));
  });
  menu.find("li").mouseleave(function(){
   position_indicator(menu.find("li.active"));
  });
  
  function position_indicator(ele){
    var left = ele.offset().left - 10;
      var width = ele.width();
      indicator.stop().animate({
        left: left,
        width: width
      });
  }
});

.menu{background: #111;position: relative;}
.menu ul{list-style: none;text-align: right;}
.menu li{display: inline-block;}
.menu a{display: inline-block;text-decoration: none;color: #fff;padding: 15px 10px;text-align: center;}
.menu .indicator{border-bottom: 5px solid green;position: absolute;bottom: 0;width: 0;opacity: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="menu">
 <ul>
  <li><a href="">Menu 1</a></li>
  <li><a href="">Menu 2</a></li>
  <li class="active"><a href="">Menu 3</a></li>
  <li><a href="">Menu 4</a></li>
  <li><a href="">Menu 5</a></li>
 </ul>
</div>

此处演示 https://jsfiddle.net/sasikumar3/j5jczkyn/

悬停动画后将边框移动到下一个 li

move border to next li after hover with animation

html

css

jquery

animation

jquery-animate