js的mouseout和mouseover事件
mouseover事件
mouseover在鼠标停留在某个元素时触发,有点类似与hover
mouseout和mouseleave事件
mouseout 与 mouseleave 事件不同,不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
例子
<div class="header-right">
<a i18n="myOrder_person" id="private_person" class="private_person" onmouseover="personCenter_show()" >個人中心</a>
<ul id="private_person_list" onmouseleave="personCenter_hide()" >
<li i18n="myOrder_order">我的訂單</li>
<li i18n="myOrder_interests">我的權益</li>
</ul>
</div>
样式如下:
当鼠标经过俩个< li >元素的中间间隔时,无论时mouseout,还是mouseleave都是会被触发的,因为已经离开了事件指向的元素!
我们可以将< li >元素的中间空隙用border填充,使用mouseleave事件,则可以在ul列表中停留,不会触发mouseleave事件,只有当鼠标离开了ul元素才会触发。