导航下面边框---hover
2019-05-29 本文已影响0人
Wo信你个鬼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.main a {
width: auto;
height: 54px;
font-size: 16px;
margin-top: 30px;
display: block;
display: inline-block;
margin-right: 30px;
position: relative;
}
span {
width: 100%;
height: 4px;
display: block;
position: absolute;
bottom: 0px;
left: 0;
}
ul {
width: 100%;
max-width: 1920px;
height: 84px;
line-height: 0px;
margin: 0 auto;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.main a span em {
width: 0%;
height: 4px;
background-color: #0095b5;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<ul>
<li class="main">
<a href="###" class="cur">
首页
<span><em style="width: 100%;"></em></span>
</a>
<a href="###">
了解深圳
<span><em></em></span>
</a>
<a href="index.html">
体圳
<span><em></em>
</span>
<p>HOT</p>
</a>
</li>
</ul>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script>
$(".main a").hover(function() {
$("em", this).animate({
width: '100%'
});
}, function() {
var css = $(this).attr("class");
console.log(css)
if(css != "cur") {
$("em", this).animate({
width: '0%'
});
}
});
</script>
</body>
</html>
