<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. 通过键盘上下键 JS事件，控制候选词的选择项

    效果图 JS代码 //上下键 选择事件 searchBackgroud 为样式,只做标记,无实质样式,因为和其他样式不兼容,只能添加CSS $(document).keydown(function ( ...

  2. Xamarin官方示例代码无法部署，提示已跳过部署解决方法

    最近利用Visual Studio 2017学习Android开发.主要是通过Xamarin官方的文档进行的.官方的入门指导提供了很多的示例代码.但是下载之后,调试运行的时候,总是无法部署到虚拟机上. ...

  3. JSP,PHP详细性能测试

    前几天在CU看到有人比较PHP与JSP,.net,结果表明PHP比JSP,.net性能低下很多.本人认为即使有差距,也不应该有这么大,所以认真测试一下几者间的性能差距.由于很久没用.net了,所以,暂 ...

  4. Java Http 请求

    package zr.weixin.com.utils; import java.io.BufferedReader; import java.io.IOException; import java. ...

  5. NEERC17 J Journey from Petersburg to Moscow

    CF上可以提交.   链接 依然是很妙的解法. 我们可以枚举每一个出现过的边权$L$,然后把所有边的边权减掉这个$L$,如果小于$L$就变为$0$,然后跑一遍最短路然后加上$k * L$更新答案即可. ...

  6. Vue.js如何搭建本地dev server和json-server 模拟请求服务器

    前言:vue-cli(版本更新),由原来的2.8.1升级为2.9.1.主要改变是原来在build文件夹下的dev-server.js删掉了,增加了webpack.dev.conf.js. 所以这次讲的 ...

  7. 关于Tomcat中封装请求-响应的结构的分析

    在编写Servlet时,往往只重写了doGet和doPost方法,使用Tomcat通过(HttpServletRequest 和 HttpServletResponse)接口传递来的request和r ...

  8. mvc全局过滤器和httpmodule的执行顺序

    根据http管线模型,请求先通过httpmodule,再通过httphandler,之后再进入mvc的过滤器 另外参考:MVC如何在Pipeline中接管请求的? http://www.cnblogs ...

  9. linux 的各个文件夹都是干什么用

    http://www.ruanyifeng.com/blog/2012/02/a_history_of_unix_directory_structure.html http://www.pathnam ...

  10. K860i的109升级需要的PinyinIME.apk和QuickSearchBox.apk两个文件

    联想K860i的109版本终于可以正常更新了,感谢下乐Phone之家的蚊子咬(http://bbs.lephone.cc/space-uid-6410.html)提供了关键的两个文件:PinyinIM ...