<html>

<head>

<meta charset="UTF-8">

<title>haha</title>

<script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

x=0;

y=0;

$(document).ready(function(){

  $("div.over").mouseover(function(){

    $(".over span").text(x+=1);

  });

  $("div.enter").mouseenter(function(){

    $(".enter span").text(y+=1);

  });

});

</script>

</head>

<body>

<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>

<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>

<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">

<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>

</div>

<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">

<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>

</div>

</body>

</html>

mouseover与mouseenter

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mouseout与mouseleave

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

一个例子说明mouseover事件与mouseenter事件的区别的更多相关文章

  1. mouseover,mouseout和mouseenter,mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...

  2. mouseover事件与mouseenter事件的区别

    不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...

  3. 一个例子说明substr(), mb_substr() 和 mb_strcut()之间的区别

    例子来自PHP官方文档,我只是翻译下. http://www.php.net/manual/zh/function.mb-strcut.php header( 'Content-Type:text/h ...

  4. jQuery-3.事件篇---鼠标事件

    jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于 ...

  5. JQuery事件之鼠标事件

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. ():click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').click(function( ...

  6. setTimeout用于取消多次执行mouseover或者mouseenter事件,间接实现hover的悬停加载的效果.

    Mouseenter在鼠标滑上去不会对其子元素也发生监听, Mouseover在鼠标滑上去会对其子元素发生监听. 所以对于事件的监听,我们要看需求,这里是对父元素的监听,不需要对子元素做监听.就用mo ...

  7. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  8. jQuery里的mouseover与mouseenter事件类型区别

    JQ里面有mouseover和mouseenter  2个事件类型干着差不多的活,用不好经常出现些小问题. 今天我解释一下原理: 事件类型翻译: mouseover 鼠标移上 mouseenter 鼠 ...

  9. mouseenter 事件

    定义和用法 当鼠标指针穿过元素时,会发生 mouseenter 事件. 该事件大多数时候会与 mouseleave 事件一起使用. mouseenter() 方法触发 mouseenter 事件,或规 ...

随机推荐

  1. vim 对齐线

    ** 从https://github.com/Yggdroot/indentLine下载 indentLine插件 git clone https://github.com/Yggdroot/inde ...

  2. SpringBoot 解决ModelAndView强转Json问题

    最近一直在做SpringBoot升级的项目,碰到了一个很蛋疼的问题. 我们项目和前端的AngularJs通过Json来传递信息,但是我们有一块的代码在Controller返回的是ModelAndVIe ...

  3. 北京优步UBER司机B组最新奖励政策、高峰翻倍奖励、行程奖励、金牌司机奖励【每周更新】

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. 天津Uber优步司机奖励政策（12月21日到12月27日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. 数据库路由中间件MyCat - 背景篇（2）

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. MyCat的前世今生 如前文所说,Amoeba.Cobar.MyCat等属于同宗一脉.若Amoeba能继续下 ...

  6. andriod学习二 设置开发环境

    1.官方环境搭建步骤     http://developer.android.com/sdk/installing/index.html         包括:下载JDK6,Eclipse 3.6, ...

  7. Linker加载so失败问题分析

    WeTest 导读 近期测试反馈一个问题,在旧版本微视基础上覆盖安装新版本的微视APP,首次打开拍摄页录制视频合成时高概率出现crash. 那么我们直奔主题,看看日志: 另外复现的日志中还出现如下信息 ...

  8. WeTest功能优化第2期：云真机智能投屏，调试告别鼠标

    第2期功能优化目录 [云真机视频映射]云真机画面本地映射[兼容性测试报告]新增问题机型聚类功能[新增Android9.0]同步上线最新安卓系统 本期介绍的云测产品功能优化,既有重磅级技术突破,也有报告 ...

  9. 华硕N43sl VNP 连接问题 800 807 621

    使用VPN 创建连接,在我自己的电脑上死活连接不上,换到别人的电脑就是可以妥妥的连接. 换了几多个IP都是800错误,经过测试都不能连接.于是开始排查,把防火墙关闭,把杀毒软件关闭, 在开始命令 输入 ...

  10. 「日常训练」湫湫系列故事——设计风景线（HDU-4514）

    题意与分析 中文题目,木得题意的讲解谢谢. 然后还是分解成两个任务:a)判环,b)找最长边. 对于这样一个无向图,强行转换成负权然后bellman-ford算法求最短是难以实现的,所以感谢没有环--我 ...