在悬停动画后将边框移动到下一个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

nav {
    text-align:center;
}
ul {
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
    position:relative;
    font-size:0px;
}
ul li {
    display:inline-block;
    padding:8px 0;
    width:80px;
    text-align:center;
    font-size:15px;
    cursor:pointer;
}
span.border {
    height:2px;
    background:red;
    width:80px;
    position:absolute;
    left:80px;
    bottom:0;
    transition: .5s linear;
}
li:nth-child(1):hover ~ span.border {
    left:0px;
}
li:nth-child(2):hover ~ span.border {
    left:80px;
}
li:nth-child(3):hover ~ span.border {
    left:160px;
}
li:nth-child(4):hover ~ span.border {
    left:240px;
}

<nav>
    <ul>
        <li>one</li>
        <li class="active">two</li>
        <li>three</li>
        <li>four</li> 
        <span class="border"></span>
    </ul>
</nav>

Answer 2

试试此代码

＆＃13;

＆＃13;

$(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
      });
  }
});

＆＃13;

.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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在这里演示https://jsfiddle.net/sasikumar3/j5jczkyn/

Answer 3

使用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>