<style>
ul,
li,
body {
padding: 0;
margin: 0;
list-style: none;
}
.nav {
width: 1200px;
margin: 100px;
display: flex;
}
.nav li {
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
box-shadow: 0 0 2px 4px #ccc inset;
/* 此处设置定位是为了后面的边框线位置做准备 */
position: relative;
overflow: hidden;
}
.nav li .line {
position: absolute;
}
/* 上边框线 */
.nav li .top-border {
width: 150px;
height: 4px;
background-color: pink;
top: 0;
left: -150px;
}
/* 右边框线 */
.nav li .right-border {
width: 4px;
height: 50px;
top: -50px;
right: 0;
background-color: rgb(106, 229, 106);
}
/* 下边框线 */
.nav li .bottom-border {
width: 150px;
height: 4px;
bottom: 0;
right: -150px;
background-color: rgb(222, 153, 222);
}
/* 左边框线 */
.nav li .left-border {
width: 4px;
height: 50px;
bottom: -50px;
left: 0;
background-color: rgb(0, 204, 255);
}
</style>
</head>
<body>
<ul class="nav">
<li>
<div class="line top-border"></div>
<div class="line right-border"></div>
<div class="line bottom-border"></div>
<div class="line left-border"></div>
<div class="text">导航A</div>
</li>
<li>
<div class="line top-border"></div>
<div class="line right-border"></div>
<div class="line bottom-border"></div>
<div class="line left-border"></div>
<div class="text">导航B</div>
</li>
<li>
<div class="line top-border"></div>
<div class="line right-border"></div>
<div class="line bottom-border"></div>
<div class="line left-border"></div>
<div class="text">导航C</div>
</li>
<li>
<div class="line top-border"></div>
<div class="line right-border"></div>
<div class="line bottom-border"></div>
<div class="line left-border"></div>
<div class="text">导航D</div>
</li>
</ul>
<!-- 引入JS库 -->
<!-- 此处链接需要根据自己下载JS库位置进行更改 -->
<script src="../libs/jQuery/jQuerymin.js"></script>
<script>
// 需求：
// 当鼠标移入导航标签时，显示该标签对应的边框线
// 当鼠标移开导航标签时，隐藏该标签对应的边框线
// 为导航栏绑定鼠标移入事件
$(".nav li").on("mouseenter", function () {
// 显示各位置的边框
$(this).find(".top-border").stop().animate({ "left": 0 }, 300); // 后面的毫秒值表示执行动画函数的时间，一秒等于一千毫秒。用户可以自行切换数值观察动画实现过程
$(this).find(".right-border").stop().animate({ "top": 0 }, 300);
$(this).find(".bottom-border").stop().animate({ "right": 0 }, 300);
$(this).find(".left-border").stop().animate({ "bottom": 0 }, 300);
})
// 为导航栏绑定鼠标移开事件
$(".nav li").on("mouseleave", function () {
// 隐藏各位置的边框
$(this).find(".top-border").stop().animate({ left: -150 }, 300);
$(this).find(".right-border").stop().animate({ top: -50 }, 300);
$(this).find(".bottom-border").stop().animate({ right: -150 }, 300);
$(this).find(".left-border").stop().animate({ bottom: -50 }, 300);
})
</script>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
