<html>

<head>

    <meta charset="UTF-8">

    <script src="jquery-3.3.1.js"></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>

3.mouseenter和mouseover事件的区别的更多相关文章

  1. mouseover和mouseenter两个事件的区别

    mouseover(鼠标覆盖) mouseenter(鼠标进入) 二者的本质区别在于,mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.但是mouseover就会被它的子元素 ...

  2. 事件处理& 事件委托& 区别mouseover与mouseenter

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

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

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

  5. 一个例子说明mouseover事件与mouseenter事件的区别

    <html> <head> <meta charset="UTF-8"> <title>haha</title> < ...

  6. 最终解决 mouseenter, mouseleave , mouseout mousehover mousemove等事件的区别?

    在jquery中, html页面的div的显示和隐藏, 修改等的功能, 最终都要由 事件 触发来引用, 不管是键盘事件, 还是鼠标事件... mouseenter和mouseleave是成对对应的, ...

  7. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  8. mouseenter和mouseover的区别

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

  9. mouseover与mouseenter,mouseout与mouseleave的区别

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

随机推荐

  1. java多线程编程核心技术-笔记

    一.第一章 1.自定义线程类中实例变量针对其他线程有共享和不共享之分,自定义线程中的变量,如果是继承自thread类,则每个线程中的示例变量的更改,不影响其他线程2.当多个线程去访问一个局部变量是会产 ...

  2. form表单中的button按钮

    如果在form表单中 , 存在button元素,button元素就充当了submit的角色

  3. SpringMVC总结三：请求Controller返回视图类型以及请求方式、参数介绍

    视图解析,请求Controller返回的视图类型: @Controller @RequestMapping("/test") public class TestController ...

  4. jmeter 插件

  5. Codeforces 1120C Compress String(DP)

    题意:给你一个字符串,有2种消除方式:1:消除一个单独的字母,代价为a.2:s[j]到s[k]是s[1]到s[j - 1]的子串,那么s[j]到s[k]可以消除,代价为b,问最小的代价. 思路:官方题 ...

  6. php 读取和下载execl

    最近用到php 对excel 的操作 下来 小弟为大家 先贴一下自己的代码  有什么补充的 大神们请指点下.感激不尽. 我用的是yii2   yii2中有类 phpexcel 先说说下载吧. 首先下载 ...

  7. SpringAOP01 利用AOP实现权限验证、利用权限验证服务实现权限验证

    1 编程范式 1.1 面向过程 1.2 面向对象 1.3 面向切面编程 1.4 函数式编程 1.5 事件驱动编程 2 什么是面向切面编程 2.1 是一种编程范式,而不是一种编程语言 2.2 解决一些特 ...

  8. Win10 Tensorflow 配置Mask_RCNN

    1.安装Anaconda3 下载地址  Anaconda 官网下载地址:https://www.continuum.io/downloads 下载以后,点击exe程序,开始安装,详细的安装过程(图片参 ...

  9. WCF4.0 –- RESTful WCF Services

    转自:http://blog.csdn.net/fangxinggood/article/details/6235662 WCF 很好的支持了 REST 的开发, 而 RESTful 的服务通常是架构 ...

  10. 洛谷P2569 [SCOI2010]股票交易

    P2569 [SCOI2010]股票交易 题目描述 最近lxhgww又迷上了投资股票,通过一段时间的观察和学习,他总结出了股票行情的一些规律. 通过一段时间的观察,lxhgww预测到了未来T天内某只股 ...