欢迎各位兄弟 发布技术文章
这里的技术是共享的
当鼠标从元素上移开时,改变元素的背景色:
$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });
当鼠标指针从元素上移开时,发生 mouseout 事件。
该事件大多数时候会与 mouseover 事件一起使用。
mouseout() 方法触发 mouseout 事件,或规定当发生 mouseout 事件时运行的函数。
注释:
mouseout与 mouseleave 事件不同,mouseout不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
直接举出 实例讲解:
<ul id="out">
<li>111</li><li>222</li><li>333</li>
</ul>
上面这个结构,希望在在ul上绑定mouseout事件,移开ul时触发事件
但是实际情况是当鼠标移动到它的子元素li上面时,也会触发mouseout事件,移动到子元素时由于事件冒泡,移动到子元素的过程被认为是先移出了ul,再进入li;
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。请看下面例子的演示。
所以要用 mouseleave
mouseleave
事件和mouseover
的不同之处是事件的冒泡的方式。如果mouseover
在这个例子中使用了,然后当鼠标指针在Inner元素上移出,该处理程序将被触发。这通常是不受欢迎的行为。另一方面, mouseleave
事件只会在绑定它的元素上被调用,而不会在后代节点上被触发。因此,在这个例子中,当鼠标离开Outer元素,而不是Inner元素时,处理器才会被触发。
不管是 mouseout 和 mouseleave 里面 如果 还用了 hover 有子元素为 inline-block时,它们都有问题,所以里面子元素还是不能用inline-block吧,
对应的 mouseleaver 应该用 mouseenter或mouseover吧
最好用mouseenter
hover!= mouseover+mouseout。
但hover=mouseenter + mouseleave
来自 http://www.w3school.com.cn/jquery/event_mouseout.asp
当鼠标指针离开元素时,改变元素的背景色:
$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });
当鼠标指针离开元素时,会发生 mouseleave 事件。
该事件大多数时候会与 mouseenter 事件一起使用。
mouseleave() 方法触发 mouseleave 事件,或规定当发生 mouseleave 事件时运行的函数。
注释:与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。请看下面例子的演示。
$(selector).mouseleave(function)
参数 | 描述 |
---|---|
function | 可选。规定当发生 mouseleave 事件时运行的函数。 |