<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{ overflow: hidden;}
ul li{
list-style: none;
float: left;
width: 90px;
position: relative;
display: inline-block;
-webkit-transition: all .2s cubic-bezier(.4,0,1,1);
transition: all .2s cubic-bezier(.4,0,1,1);
}
ul li a{
position: relative;
color: #333;
text-decoration: none;
text-align: center;
line-height: 70px;
font-size: 14px;
display: block;
z-index: 100;
/*background: #9c0;*/
}
li:nth-child(1)::after {
background: #b9d329;
}
li:nth-child(2)::after {
background: #c0ebf7
}
li:nth-child(3)::after {
background: #b3aff7
}
li:nth-child(4)::after {
background: #f7c2c7
}
li:nth-child(5)::after {
background: #dbf737
}
li:nth-child(6)::after {
background: #ddc9f7
}
li:nth-child(7)::after {
background: #acf7e7
}
li:nth-child(8)::after {
background: #f7dfa4
}
li::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 70px;
top: 66px;
-webkit-transition: .2s all ease-in-out;
transition: .2s all ease-in-out;
z-index: 1;
}
li.on::after{
top:0;
left:0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">首页</a></li>
</ul>
</nav>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(‘ul li‘).mouseover(function(){
$(this).addClass(‘on‘)
});
$(‘ul li‘).mouseout(function(){
$(this).removeClass(‘on‘)
});
})
</script>
</body>
</html>
时间： 2024-10-10 10:36:22