JQuery鼠标在文档移动过和移出事件
来看一下鼠标在文档上面时的效果
就是这样的效果
代码如下
css 和jquery代码
<style>
li{
list-style: none;
float: left;
padding: 0px 5px;
text-decoration: none;
}
.heightcontent{
background-color: aqua;
}
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li").mouseover(function(){
$(this).addClass("heightcontent");
});
$("li").mouseout(function(){
$(this).removeClass("heightcontent");
})
});
</script>
如果想要更完美一点可以根据自己喜好更改。。。
<body>
<ul>
<li>首页</li>
<li>服装城</li>
<li>电器城</li>
<li>易购超市</li>
<li>易购团</li>
<li>在线购物</li>
</ul>
</body>