今天关于两个方法进行查询
$("li").each(function(i) {
//删除的鼠标划过的显示与隐藏
$(this).mouseover(function() {
$(this).find(".del").fadeIn(10);
})
$(this).mouseleave(function() {
$(this).find(".del").fadeOut(10);
})
})
上面的代码中如果不是用的mouseleave而是mouseout的话你会发现尚未离开类名的.del这个DIV这个DIV有时候就会闪动。那是因为你可能离开了该DIV的子元素，所以会出发mouseout事件。具体mouseleave和mouseout两者之间的区别主要有以下两点：
1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
下面是w3c上的例子很便于大家理解
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.out").mouseout(function(){
$(".out span").text(x+=1);
});
$("div.leave").mouseleave(function(){
$(".leave span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
</div>
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
</div>
</body>
</html>
相关推荐
`mouseenter`和`mouseleave`事件与`mouseover`和`mouseout`类似，但有一些关键的区别。`mouseover`和`mouseout`在鼠标进入或离开元素及其子元素时都会触发，而`mouseenter`和`mouseleave`只在鼠标进入或离开元素本身...
本文详细的介绍了关于jQuery中mouseleave和mouseout的区别，分享给大家供大家参考，具体内容如下 很多人在使用jQuery实现鼠标悬停效果时，一般都会用到mouseover和mouseout这对事件。而在实现过程中，可能会出现一些...
当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象，解决这个现象的办法有许多，不过我觉得有一种是最简单的那就是把mouseover和mouseout换成对应的mouseenter和mouseleave。 当鼠标指针...
3. mouseenter和mouseleave事件：与mouseover和mouseout不同，mouseenter和mouseleave事件不会在事件冒泡阶段触发。这意味着，只有当鼠标指针实际进入或离开被选元素本身时，这些事件才会被触发，从而避免了因子元素...
1. 使用mouseenter和mouseleave事件替代mouseover和mouseout。这些事件由IE浏览器首先提出，而后被最新版本的其他主流浏览器支持。mouseenter事件只在鼠标指针进入元素内部时触发一次，而mouseleave事件则在鼠标指针...
1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 代码如下: ”sel_box”> <input type=”button” value=”请选择所属部门” ...
鼠标事件进行监听 ...翻阅了一些博客，发现好多都提到了mouse事件，如mouseover、mouseout、mouseenter、mouseleave，在之后我自己也通过这种方法进行了尝试。 xss=removed> label=图片 width=180> <
总结来说，当面临因嵌套元素导致的 `mouseover` 和 `mouseout` 事件频繁触发的问题时，可以考虑使用jQuery的 `mouseenter` 和 `mouseleave` 或 `hover()` 方法来优化代码，提高用户体验。同时，为了确保在边界情况下...
这两个事件与`mouseover`和`mouseout`类似，但它们不会受子元素的影响。`mouseenter`仅在鼠标首次进入元素时触发，而`mouseleave`则在鼠标离开元素自身时触发，不会因为子元素而被反复触发。因此，使用`mouseenter`...
与mouseover和mouseout不同，hover事件并不是原生JavaScript或jQuery内置的事件。hover事件是jQuery提供的一个便捷方法，它封装了mouseenter和mouseleave事件。mouseenter事件仅在鼠标指针从非元素区域直接进入到...
`relativeTarget`属性通常用于`mouseover`和`mouseout`事件中，它表示鼠标进入或离开的元素。 `mouseenter`和`mouseover`事件的区别在于，`mouseenter`事件不会在事件源元素的子元素之间移动时触发，而`mouseover`...
同理，mouseleave与mouseout事件也有类似的区别。mouseout事件会在鼠标移出子元素时冒泡到父元素，触发父元素的mouseout事件，而mouseleave则只在鼠标完全离开元素时触发，不考虑子元素的情况。 由于mouseenter和...
记录两个项目开发中遇到的问题，一个是ECharts外部调用保存为图片操作，一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题。 一、外部按钮调用ECharts图表的保存为图片操作 ...