HTML
<body>
<div class="nav">
<ul>
<li>
<a href="#">导航一</a>
<span></span>
</li>
<li>
<a href="#">导航二</a>
<span></span>
</li>
<li>
<a href="#">导航三</a>
<span></span>
</li>
<li>
<a href="#">导航四</a>
<span></span>
</li>
<li>
<a href="#">导航五</a>
<span></span>
</li>
</ul>
</div>
</body>
CSS
*{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
}
.nav{
width: 500px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.nav li{
width: 100px;
height: 60px;
line-height: 60px;
float: left;
position: relative;
overflow: hidden;
}
.nav a{
position: absolute;
width: 100%;
height: 100%;
font-size: 24px;
color: blue;
text-align: center;
z-index: 100;
}
.nav span{
position: absolute;
width: 100%;
height: 100%;
background-color: yellow;
top: 60px;
}
jquery
<script src="jQuery/jquery-1.12.3.js"></script>
<script>
$(function () {
$(".nav li").mouseenter(function () {
$(this).children("span").stop().animate({top:0});
}).mouseleave(function () {
$(this).children("span").stop().animate({top:60});
});
// 按下1-9这几个数字键，能触发对应的mouseenter事件
$(document).on("keydown",function (e) {
// 获取对应按下的键
var code = e.keyCode;
if (code >= 49 && code <= 57) {
// 触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseenter();
}
});
$(document).on("keyup",function (e) {
// 获取对应按下的键
var code = e.keyCode;
if (code >= 49 && code <= 57) {
// 触发对应的li的mouseleave事件
$(".nav li").eq(code - 49).mouseleave();
}
});
});
</script>
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
