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

Posted 2023-03-06

【中文标题】用动画悬停后将边框移动到下一个 li

【英文标题】：move border to next li after hover with animation

【发布时间】：2017-03-18 02:11:53

【问题描述】：

我创建了一个 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>

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

【参考方案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
      );
  
);

.menubackground: #111;position: relative;
.menu ullist-style: none;text-align: right;
.menu lidisplay: inline-block;
.menu adisplay: inline-block;text-decoration: none;color: #fff;padding: 15px 10px;text-align: center;
.menu .indicatorborder-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/

【讨论】：

非常感谢，就是这样！ :X

【参考方案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>

【讨论】：

谢谢，就是这样，但只是一个问题！ ，我希望在悬停动画时边框从右到左或从左到右移动！

我希望边框在鼠标悬停时从右到左或从左到右移动！