jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

  1. hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件；
  2. mouseenter、mouseleave：效果与hover相同；
  3. mouseover： 鼠标进入元素和进入它的子元素时都会触发‘mouseover’的事件，即使添加了event.stopPropagation();return false;
  4. mouseout： 鼠标离开元素和离开它的子元素时都会触发‘mouseout’的事件，即使添加了event.stopPropagation();return false;
时间： 2024-07-31 23:10:58

jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout的相关文章

鼠标移入移出事件

鼠标移入移出事件: mouseover:鼠标移入到目标元素的上方,在其子元素上时也会触发,.所以说也就是说会产生冒泡. <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style> .parent{height: 400px; width: 400px;border: 1px solid red;}

认清鼠标移入移出事件

本文也同步发表在我的公众号"我的天空" 鼠标的移入移出事件,是在我们做一些前端效果时使用相当频繁的事件,但在JS中,鼠标的移入移出事件有两对,分别是mouseover.mouseout:以及mouseenter.mouseleave,如果没有对其的区别有清新的认识话,则很容易掉坑里! 譬如某次有人反映需要做以下这么一个效果:当鼠标移入背景图片时,将有一个遮罩层升起,当鼠标移出后,遮罩层落下(如图),该效果还是很常见的: 其采用jquery的animate()结合鼠标的移入移出事件来处理

JS添加、设置属性以及鼠标移入移出事件

源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px auto; } #wk{ width:100px; } .pname{ width: 100px; height: 50px; line-height: 50p

jquery——解决鼠标移入移出导致盒子不停移动的bug

使用mouseover().mouseout()时会出现这样一种情况,鼠标快速多次移入移出后这个盒子会在鼠标不动后继续运动 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src

js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },function(){ $(".weixinTop").hide(); }); </script> js代码如上: 最终发现: class="weixinTop" 的div,把class="guanzhu"所在的层遮住了,导致类似鼠标移出的效果,移出之

用JQuery给图片添加鼠标移入移出事件

$("#addLineImg").mouseover( function(){ $("#addLineImg").attr("src","pages/annottor/claim/img/plus2.png"); } ); $("#addLineImg").mouseout( function(){ $("#addLineImg").attr("src","

javascript父级鼠标移入移出事件中的子集影响父级的处理方法

一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级): 2.当鼠标从子集移出到父级时又触发了父级的两个事件:a.由于事件冒泡影响,父级触发了mouseout事件(父级移出父级):b.再触发了父级的mouseover事件(子集移入父级) 注:红色字体的解释是事件冒泡的奇妙之处. 二.解决方法: 首先必须先熟悉以下两个方法和一个事件属性: a,b为节点

清除子元素继承父元素鼠标移入移出事件

function contains(parentNode, childNode) { if (parentNode.contains) { return parentNode != childNode && parentNode.contains(childNode); } else { return !!(parentNode.compareDocumentPosition(childNode) & 16); } } function checkHover(e,target){

HTML5+CSS3鼠标移入移出图片生成随机动画

今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代码所代表含义,我这里就给出一些思路及关键代码: 1.首先使用ul li展现4张图片 本示例中不仅使用了图片,在图片表面还放置了一段“WEB”字样文字,用于与图片实现隐藏或显示效果,故html中每张图片上方加入: <div class="mytext">WEB</div&g