关于mouseover,mouseout 和 mouseenter,mouseleave

mouseover和mouseenter区别

做了个测试。

mouseover

当鼠标进入元素时候触发事件。

进入子元素时，又触发了一次事件

鼠标离开子元素回到事件元素的时候又触发一次。

也就是说当鼠标移入元素或其子元素都会触发事件，支持冒泡。

mouseenter

而mouseenter事件则不支持冒泡，当鼠标进入元素的时候触发（不包含子元素）

mouseout和mouseleave区别

mouseout

当鼠标从事件元素移到其子元素的时候触发了。

官方上对mouseout的描述是当光标从一个元素到另一个元素时触发，也就包括外部到父元素，以及父元素到子元素。

实际上，mouseover和mouseout 都是从一个元素的边界之内把光标移动到另一个元素的边界之内触发的，只是它们的目标不同。

当然，移出去也一样会触发。

值得注意的是

如果同时设置mouseover和mouseout

从事件元素移动到其子元素的时候会同时触发mouseover和mouseout事件
颜色没有发生变化，

而从子元素移出去的时候

同样触发了两次，颜色却没有变化。
这是因为光标在事件元素内部元素之间切换的时候首先触发mouseout事件，其次再触发mouseover事件，所以颜色被覆盖了，没有发生变化。

mouseleave

而mouseleave只在脱离事件元素时才生效。

关于mouseover,mouseout 和 mouseenter,mouseleave相关推荐

鼠标浮动到表格的某行背景颜色变化[mouseover mouseout 以及mouseenter mouseleave]
之前一直觉得很难,今天用到了好像超级简单 <table id="tableData"><tr class="flag"><td& ...
js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?
1. 鼠标事件 mouseenter mouseleave (一对事件鼠标的进入和离开) 不支持冒泡 mouseenter:鼠标从元素外部移到元素内部时触发. mouseleave:鼠标从元素内部移 ...
mouseover，mouseout，mouseenter，mouseleave，hover
之前做鼠标移入一个div后显示一个半透明层这样的效果时出了点小问题,就是鼠标移上去后在这个半透明层上移动时会不断的闪烁. 今天再看时才发现原来我写的div跟这个半透明的div是同级的,怪不得会闪烁啦~ ...
java mouseenter_关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
最近在做的在线考试和课程商城都遇到这样的问题:就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,解决这个现象的办法有许多,不过我觉 ...
mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
1.mouseover事件与mouseenter事件 mouseover事件:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. mouseenter事件:只有在鼠标指针穿过被选 ...
mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...
转载：mouseOver/mouseOut 与 rollOver/rollOut的区别
一直在做有关鼠标移动都是用mouseOver,mouseOut. 但是最近做一個项目的时候用mouseOver,mouseOut出问题.后来网络上找了一下关于mouseOver,mouseOut的研究 ...
mouseenter/mouseleave多次触发fadeIn/fadeOut问题
在一次使用使用mouseenter/mouseleave实现显示/隐藏操作的时候发现会多次触发fadeIn/fadeOut, 效果如下图: 每次会累计触发fadeIn/fadeOut 代码如下 css ...
鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave
Mousemove: 当鼠标指针在元素内移动时,mousemove事件就会被触发,任何HTML元素都可以接受此事件. Mousemove 事件是当鼠标指针移动时触发的,即使是一个像素.这意味着多个事件 ...