image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#header_Wrap nav {
display: flex;
align-items: center;
position: relative;
background:rgba(0, 153, 255, 0.8);
}
#header_Wrap nav a {
font-size: 16px;
color: #fff;
padding: 0 32px;
height: 80px;
line-height: 80px;
z-index: 1;
}
.nav_line {
position: absolute;
top: 0px;
left: 0;
width: 96px;
height: 80px;
background-color: #F29021;
}
</style>
</head>
<body>
<header id="header_Wrap">
<nav>
<a class="cur" href="javascript:void(0);">首页</a>
<a href="javascript:void(0);">发布车源</a>
<a href="javascript:void(0);">查找货源</a>
<a href="javascript:void(0);">我的运单</a>
<a href="javascript:void(0);">个人账户</a>
<a href="javascript:void(0);">个人中心</a>
<div class="nav_line"></div>
</nav>
</header>
</body>
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
<!-- 公共导航栏 -->
<script type="text/javascript">
var $navLi = $('#header_Wrap nav a');
var $navLiCur = $('#header_Wrap nav a.cur');
var $navUl = $('#header_Wrap nav');
var $navLine = $('#header_Wrap .nav_line');
// 初始化位置
$navLine.animate({
width: $navLiCur.outerWidth(),
left: $navLiCur.position().left,
})
// 鼠标移入位置
$navLi.on('mouseenter', function () {
PoLeft = $(this).position().left; // "li"距父元素"ul"的偏移位置
WidthLine = $(this).outerWidth(); // width + padding + border
$navLine.stop().animate({
width: WidthLine,
left: PoLeft + 0
});
})
// 鼠标移出位置
$navUl.on('mouseleave', function () {
$navLine.stop().animate({
width: $navLiCur.outerWidth(),
left: $navLiCur.position().left,
});
})
</script>
</html>
