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

Question

我创建了一个 4 li 和活动类的导航栏

现在我希望当我将鼠标悬停在第二个 li 上时，我的边框底部会随着动画从第一个 li 移动到第二个 li

这是我的导航栏代码：

.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

试试这个代码

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

Answer 2

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

请检查下面的工作 sn-p。

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