标签：
mouseover 和 mouseenter
mouseout 和 mouseleave
mouseover / mouseout 鼠标进入/走出元素或其子元素时 均可触发
mouseenter / mouseleave 鼠标进入/走出元素才会触发
$().hover(function () {
/*mouseenter*/
}, function () {
/*mouseleave*/
});
$().hover(function () {
/*mouseenter和mouseleave*/
});
slideToggle jQuery帮帮我们封装好的切换
<div id="box" class="box">
<ul>
<li>
<a href="https://www.baidu.com">第一页</a>
<ul>
<li><a href="https://www.baidu.com">第一页1</a></li>
<li><a href="https://www.baidu.com">第一页2</a></li>
<li><a href="https://www.baidu.com">第一页3</a></li>
</ul>
</li>
<li>
<a href="https://www.baidu.com">第二页</a>
<ul>
<li><a href="https://www.baidu.com">第二页1</a></li>
<li><a href="https://www.baidu.com">第二页2</a></li>
<li><a href="https://www.baidu.com">第二页3</a></li>
</ul>
</li>
<li>
<a href="https://www.baidu.com">第三页</a>
<ul>
<li><a href="https://www.baidu.com">第三页1</a></li>
<li><a href="https://www.baidu.com">第三页2</a></li>
<li><a href="https://www.baidu.com">第三页3</a></li>
</ul>
</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 330px;
height: 30px;
padding-left: 10px;
margin: 100px auto;
background: #DDDDDD url(http://www.mengtu.cc/uploads/allimg/140906/7-140Z61I929.jpg) no-repeat center center scroll;
}
.box ul li {
position: relative;
float: left;
width: 100px;
line-height: 30px;
margin-right: 10px;
}
.box ul li a{
display: block;
text-align: center;
text-decoration: none;
background: #DDDDDD url(http://www.mengtu.cc/uploads/allimg/140906/7-140Z61I929.jpg) no-repeat center center scroll;
}
.box ul li ul{
position: absolute;
display: none;
}
$(function () {
$("#box>ul>li").hover(function () {
$(this).children("ul").slideToggle();
});
});
标签：
原文地址：http://www.cnblogs.com/WeWeZhang/p/5796578.html
