在使用div+ul模拟下拉框时需要实现鼠标从下拉框上移开时收起下拉框,
我第一直觉是使用mouseout,耶,理所当然,但在实际效果中发现效果并不是想象的那样
mouseout
以下代码鼠标指针离开任何子元素,就会触发 mouseout 事件。
ul{
width: 120px;
background-color: #000;
position: absolute;
height: 100px;
z-index: 20000;
margin-top: -1px;
}
ul li{
width: 100%;
height: 20px;
background: #FF8040;
border: 5px solid #FFFF00;
}
.none{
display: none;
}
<ul>
<li></li>
<li></li>
<li></li>
</ul>
$('ul').mouseout(function(){
$(this).removeClass('block').addClass('none')
});
mouseleave
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
就以上代码改变监听事件,得到了我们想要的结果
$('ul').mouseleave(function(){
$(this).removeClass('block').addClass('none')
});