mouseleave 和 mouseout 区别

jQuery中的mouseleave和mouseout的区别

$("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 事件。

---恢复内容结束---

时间: 2024-10-06 12:13:31

mouseleave 和 mouseout 区别的相关文章

mouseenter与mouseover mouseleave与mouseout 之间的区别

mouseenter与mouseover的区别 鼠标指针穿过被选元素或其子元素,会触发 mouseover 事件. 鼠标指针只在穿过被选元素时,才会触发 mouseenter 事件. mouseleave与mouseout的区别亦同上 鼠标指针离开当前元素或者当前元素的子元素时触发事件. 鼠标指针只在离开当前元素时才会触发.

细说mouseenter和mouseover,mouseleave和mouseout的区别!!超级蛋疼的体验

昨天在写一个项目的时候发现了一个比较蛋疼的问题.就是在写一个鼠标移入移出的效果的时候发现在用mouseover和mouseout会有些诡异的效果就是在鼠标移入更多的时候会出现一个下拉框,需求是当鼠标离开下面的框框后再消失,但是当鼠标一旦移到下面的框框的时候整个框框就消失了.最开始我用的是hover()方法,如下: $(function(){$("#header .more1").hover(function(){ $("#header .more").show();

mouseout、mouseover和mouseleave、mouseenter区别

mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入某元素时触发,移入和移出其子元素时也会触发. mouseout:当鼠标移出某元素时触发,移入和移出其子元素时也会触发. mousemove:鼠标在某元素上移动时触发,即使在其子元素上也会触发. mouseout.mouseover和mouseleave.mouseenter最大的区别,在于子元素连带触发. <!DOCTYPE html><html><h

jQuery中mouseleave和mouseout的区别详解

很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;"> <div id="title" style="cursor: pointer;

mouse事件(mouseleave,mouseenter,mouseout,mouseover)

当指针设备移动到存在监听器的元素或其子元素的时候,事件就会触发区别: mouseover,  mouseout(有冒泡机制) mouseenter,  mouseleave(无冒泡机制) 原文地址:https://www.cnblogs.com/xiaohaodeboke/p/12513266.html

jQuery中mouseenter vs mouseover 以及 mouseleave vs mouseout

mouseenter 和 mouseleave 如果该对象有子元素,则进入子元素时不会触发对应的 mouseleave 和 mouseenter事件,可以想象子元素不存在,比如你和你的孩子住在一套房里,如果孩子还很小,尽管睡不同的房间,但你不会感觉你进入到另一个家庭中,这还是老子的家, 我说话还算数 :) #=.=! mouseover 和 mouseout 如果该对象有子元素,则进入子元素时会触发对应的事件,可以想象被子元素挖了个坑, mouseover从父到子实际上是父over父out(父)

mouseenter(fn)和mouseleave、mouseover和mouseout的的区别

$('.box1').mouseenter(function(){//穿入事件mouseenter $(this).css('background','red'); }).mouseleave(function(){ $(this).css('background','green'); }) 再看看看一张效果图片: 这貌似和移入.移出事件区别.如果在.box1添加一个层,会怎么样了??? <div class="box1"> <p></p> <

JQuery--mouseover()与moseout()的区别

mouseover()与mouseout()区别 普通鼠标移入移出事件 语法: mouseover()/mouseout() 功能: 当鼠标移入/移出到添加事件的元素或其子元素的时候,都会被触发!!mouseenter/mouseleave是更好的鼠标移入事件!! 语法: mouseenter()/mouseleave() 功能: 当鼠标移入/移出到添加事件的元素才会被触发,子元素不会被触发例子: 1 <!DOCTYPE html> 2 <html lang="en"

jquery事件的区别

1. mouseenter 和 mouseover  (mouseleave 和 mouseout) 前者鼠标进入当前元素触发,内部的子元素不会触发事件. 而后者是进入当前元素后,当前元素和内部的子元素都会分别触发事件. hover() 替代 mouseenter 和  mouseleave