<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. vue2.0 移动端，下拉刷新，上拉加载更多插件，修改版

    在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...

  2. CentOS 7.x下升级Python版本到3.x系列(新老版本共存)

    由于python官方已宣布2.x系列即将停止支持,为了向前看,我们升级系统的python版本为3.x系列服务器系统为当前最新的CentOS 7.4 1.安装前查看当前系统下的python版本号 # p ...

  3. 阿里云Windows远程连接出现身份验证错误，要求的函数不正确”的报错。

    最近很多阿里云用户在远程Windows Server的云服务器ECS时出现“身份验证错误,要求的函数不受支持”的报错. 这个问题解决起来非常简单,修改组策略中的一个配置就可以了. 在运行中输入gped ...

  4. PHP防止数字太大转化为科学计数法的方法

    PHP当数字在20位或者20位以上时,会转化为科学计数法 例子: <?phpecho 11111111111111111111; ?> 解决方法可以使用php函数number_format ...

  5. python的基本知识

    1. python的简介    python的创始⼈人为吉多·范罗苏姆(Guido van Rossum).1989年年的圣诞节期间,吉多· 范罗苏姆为了了在阿姆斯特丹丹打发时间,决⼼心开发⼀个新的脚 ...

  6. python之变量的命名规则

    变量的命名规则: 1.变量名由数字.字母和下划线组成名 2.变量名不能以数字开头 3.禁止使用python中的关键字 4.不能使用中文和拼音 5.变量名要区分大小写 6.变量名要有意义 7.推荐写法: ...

  7. PHP array_reduce()函数的应用解析

    实例 向用户自定义函数发送数组中的值,并返回一个字符串: <?php function myfunction($v1,$v2) { return $v1 . "-" . $v ...

  8. go基础语法-函数

    1.基础定义 golang的函数很'纯粹',只有可变参数列表的概念,没有默认参数.可选参数.函数重载.操作符重载这些难以把控的概念 语法:'func'声明,而后函数名在前,中间的括号内定义参数,返回值 ...

  9. 【8086汇编-Day3】用debug做实验时的技巧与坑

    Ⅰ· 无病呻吟 学一门语言,不动手实验是学不好的,在实验中不断遇坑然后解决,才有进益.所以写一下我在第一次汇编实验中的所思所想(王爽<汇编语言>第二章章末实验). Ⅱ · 实验内容 题解思 ...

  10. CLR via c#读书笔记六：参数

    注:书本第9单参数 CLR默认所有方法参数都传值.引用本身是值引的,意味左方法能修改对象,而调用都能看到这些修改.值类型,传的是实例的一个副本,所以调用者不受影响. (和以前理解的不一样.默认都是传值 ...