`

jQuery同时使用mouseover和mouseout造成闪烁

阅读更多

【前言】

      下拉菜单效果,jQuery同时使用mouseover和mouseout造成闪烁,这里简单总结下解决方案

      参考文章解决slideDown()和slideUp()反复执行的问题

     

【主体】

      这里涉及到一个事件冒泡,由内到外执行,二级菜单的下拉过程中,如果划出二级菜单时会发生事件冒泡,从而导致下拉菜单在下拉和上滑间来回切换。

      这个在jQuery文档里已经给过提示说明:

 

      (1)mouseover与mouseenter区别

①mouseover事件是在鼠标进入指定元素时或者任意子元素的时候触发 
②mouseenter事件只有在鼠标进入被选元素时触发

两者的显著区别在于mouseover会导致子元素向上触发事件,产生类似冒泡事件的效果。而mouseenter只有在被选元素上产生效果,与子元素无关眨眼

 

      (2)mouseout与mouseenter区别

①mouseout当鼠标离开被选元素或者任意子级元素的时候触发
②mouseleave事件只有在鼠标离开被选元素时触发

两者区别与上面类似。


 

       (3)所以,以后做二级下拉菜单尽量避免用mouseover()和mouseout()的组合,建议用hover(inFuntion,outFunction)方法------→该方法相当于mouseenter与mouseleavel()的结合。

 

                

 

【小结】

     (1)hover != mouseover+mouseout,但hover = mouseenter+mouseleave

     (2)

.

  • 大小: 25 KB
分享到:
评论

相关推荐

    扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁

    在我们对一个dom添加mouseover和mouseout时,也就是jquery的hover事件,如果该dom有子元素,鼠标移到子元素时会触发mouseout事件,但往往实际情况我们希望在子元素上不触发out事件

    jquery鼠标滑过标题图片拼接闪烁切换

    首先,我们需要绑定`mouseover`和`mouseout`事件到标题元素上。`mouseover`事件在鼠标进入元素时触发,而`mouseout`事件在鼠标离开元素时触发。 ```javascript $(document).ready(function() { $('.title')....

    带鼠标滑过特效的jQuery霓虹灯文字插件

    jQuery提供了丰富的事件处理函数,如mouseover和mouseout,可以监听鼠标的进入和离开。在这些事件触发时,通过修改CSS样式,如color或text-shadow的颜色值,就能实现颜色的平滑过渡。 为了实现这个插件,开发者首先...

    jquery和CSS3带弹性动画效果的工具栏菜单

    4. **jQuery交互**:通过jQuery监听菜单项的`mouseover`和`mouseout`事件,触发CSS3的动画。例如,当鼠标进入菜单项时,使用`.addClass()`添加一个包含动画样式的类;当鼠标离开时,使用`.removeClass()`移除该类,...

    jquery tips提示图片信息.rar

    3. 鼠标事件:jQuery提供了多种与鼠标交互相关的事件,如`mouseover`、`mouseout`、`mousemove`。例如,`mouseover`可以在鼠标进入元素时触发,`mouseout`则在离开时触发,`mousemove`可以追踪鼠标的移动。 4. 动态...

    jqurey鼠标经过例子

    在本文中,我们将深入探讨jQuery中的“鼠标经过”(mouseover和mouseout)事件,以及如何利用它们来实现一些实用的交互效果。在这个特定的例子中,我们关注的是“鼠标经过显示图片”和“淘宝分类隐藏显示更多分类...

    jquery鼠标悬停列表菜单样式代码.zip

    接着,jQuery代码会监听`mouseover`和`mouseout`事件。当鼠标进入(mouseover)某个菜单项,它会显示对应的子菜单;当鼠标离开(mouseout)时,子菜单会再次隐藏。为了提供良好的用户体验,可能还需要防止因鼠标快速...

    jQuery鼠标滑过霓虹灯文字高亮特效.zip

    4. 使用jQuery选择器找到相关元素,绑定`mouseover`和`mouseout`事件处理器。 5. 在事件处理器中,通过修改CSS类或者直接改变样式来实现文字的高亮和恢复效果。可以使用动画函数如`fadeIn`、`fadeOut`或`animate`来...

    基于jquery实现的鼠标划过应用图标显示应用的名字及下载量.rar

    项目中的关键事件是`mouseover`和`mouseout`。`mouseover`事件会在鼠标指针进入某个元素时触发,而`mouseout`事件则在鼠标离开元素时触发。我们可以为这些事件绑定相应的处理函数,例如: ```javascript $(".app-...

    jquery hover淘宝商城鼠标滑过展开更多导航菜单分类列.

    hover方法是jQuery提供的一个便捷函数,它可以同时处理mouseover和mouseout事件。它接受两个参数,分别对应于鼠标进入和离开元素时执行的函数。例如: ```javascript $(".menu-item").hover(function() { // 鼠标...

    jquery 弹出层跟随鼠标移动

    同时,我们还需要监听`mouseout`事件,以便在鼠标离开该区域时隐藏弹出层。 2. **动态创建元素**: 当用户鼠标移到特定位置时,我们需要动态地创建弹出层(通常是一个包含信息的div元素)。这可以通过 `jQuery()` ...

    jQuery+CSS3带鼠标滑过的霓虹灯文字特效源码.zip

    - `mouseout`事件:鼠标离开元素时,使用`.mouseout()`方法恢复原始状态。 4. **源码分析** - `132687036562434979.js`:这是包含jQuery霓虹灯效果逻辑的JavaScript文件。其中,主要包含对`.neon-text`类的选择、...

    jQuery多级无限级导航下拉菜单.zip

    这段代码在文档加载完成后,监听一级菜单`<li>`的`mouseover`和`mouseout`事件。当鼠标进入时,使用`slideDown`动画显示子菜单;当鼠标离开时,使用`slideUp`动画隐藏子菜单。`stop`方法用于停止当前进行的动画,...

    HTML5 canvas元素背景梦幻小星星闪烁特效

    同时,为了响应鼠标滑过事件,可能使用了`addEventListener()`来监听`mouseover`和`mouseout`事件,当鼠标进入和离开元素时,改变星星的闪烁速度或状态。 在CSS方面,可能有专门的样式设置来确保canvas元素覆盖整个...

    jquery+css3 3D旋转效果

    例如,当鼠标悬停在元素上时,jQuery可以监听`mouseover`和`mouseout`事件,然后通过修改CSS3的`transform`属性来启动或停止旋转效果。CSS3的`transform-style: preserve-3d;`属性能保持子元素的3D空间位置,这对于...

    jQuery鼠标悬停导航列表滑动展开菜单代码

    然后,我们可以为这些元素绑定`hover`事件,这是一个组合了`mouseover`和`mouseout`事件的简写,可以这样写:`$("selector").hover(function() {}, function() {})`。 在悬停事件的回调函数中,我们将触发子菜单的...

    JQuery鼠标经过延迟处理

    在处理用户交互时,特别是涉及到鼠标的事件,如`mouseover`和`mouseout`,我们经常需要一种方法来优化用户体验,避免频繁触发事件处理器。这就是“鼠标经过延迟处理”发挥作用的地方。这个概念旨在在用户将鼠标悬停...

    jQuery选项卡开关和下拉菜单代码.7z

    3. **jQuery事件处理**:监听主菜单项的`mouseover`和`mouseout`事件,当鼠标悬停在主菜单项上时,显示子菜单;离开时,隐藏子菜单。 4. **动画效果**:可添加过渡效果,如使用`slideDown`、`slideUp`等方法,使下拉...

    jQuery鼠标经过二级菜单下拉代码.zip

    4. 添加mouseout事件监听,当鼠标离开一级菜单时,恢复二级菜单的隐藏状态。 5. 为了防止因鼠标快速移动导致的闪烁或误触发,可能还需要添加一些延迟或缓冲机制。 代码实现可能包含HTML结构、CSS样式和jQuery脚本三...

    jQuery实现宽屏图片左右滚动切换特效源码(可自定义图片滚动速度与时间调整).zip

    3. **事件处理**:jQuery封装了事件绑定,如`click()`用于绑定点击事件,`mouseover()`和`mouseout()`分别用于绑定鼠标悬停和离开事件。在这个图片轮播中,可能使用了这些事件来触发图片的切换。 4. **动画效果**:...

Global site tag (gtag.js) - Google Analytics