<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript" src="../Packages/jQuery.1.8.3/jquery-1.8.3.min.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>

mouseleave与mouseout与之对应。

jquery中可用hover替换以上操作

        x = 0;

        y = 0;

        $(document).ready(function () {

            $("div.over").hover(

               function () { $(".over span").text(x += 1); },

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

            )

        });

　　

hover(enter,leave)模拟光标悬停事件,光标移到元素上触发enter，移除触发leave

hover(enter,leave)是用于替换bind("mouseenter")和bind("mouseleave"),不是用于替换bind("mouseover")和bind("mouseout")

转载：http://blog.csdn.net/ocean1010/article/details/7394599

jquery mouseover与mouseenter区别的更多相关文章

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

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

  2. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

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

  3. jQuery mouseover与mouseenter的区别

    在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

  4. mouseleave,mouseout 和mouseover ，mouseenter区别

    鼠标离开事件: mouseleave:只有鼠标离开指定元素时才会触发; mouseout 鼠标离开指定元素或内部子元素都会触发; 鼠标在上事件: mouseover:只有鼠标进入指定元素时才会触发; ...

  5. mouseover与mouseenter区别

    学习笔记. mouseover:在鼠标移入元素本身或者子元素时都会触发事件,相当于有一个冒泡过程.而且在鼠标移入子元素中时,父元素会显示离开的状态:相应的,当鼠标从子元素移入父元素,子元素也会显示离开 ...

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

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

  7. jquery的hover mouseover mouseout mouseenter mouseleave的区别

    jquery的hover mouseover mouseout mouseenter mouseleave的区别 1.mouseover mouseout mouseover - 鼠标指针经过任何子元 ...

  8. jQuery关于mouseover和mouseenter的区别

    原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...

  9. jquery中mouseover和mouseenter的区别

    jquery中mouseover和mouseenter的区别 一.总结 一句话总结: 见名知意:enter(进入)和over(在上方)的意思好好思考一下 mouseover就是从子元素回到自己的时候也 ...

随机推荐

  1. JS 对数组的操作集锦(基础)

    下面内容是自己复习基础时候整理出来的,感谢缪雪峰老师的课程让自己可以有节奏的复习基础的东西! 以下内容颜色是重点关注,已经特别注意提醒,不是为了颜色好看噢,希望能帮到刚学习前端的朋友们,后续还会持续更 ...

  2. JMeter4.0的界面汉化

    1.安装好之后 2.界面汉化 options->choose language->chinese(simplified) 3.汉化完成

  3. ubuntu更新下载源问题

    Q1:ubuntu14.04系统安装完之后无法跟新并安装插件 cd /var/lib/apt/lists sudo rm * -rf sudo apt-get clean;sudo apt-get u ...

  4. IE8不能保存cookie，造成response.redirect死循环的原因

    今天发现部分用户的IE8出现登录时死循环,操作系统是windows server 2008. 最后将登录地址:https://www.xxx/login.aspx加到本地intranet站点中,问题解 ...

  5. 2018-10-23 23:29:54 clanguage

    2018-10-23   23:29:54 clanguage 在 32 位环境以及 Win64 环境下的运行结果为: short=2, int=4, long=4, char=1 在 64 位 Li ...

  6. Android--用JS去控制WebView显示的字体的大小

    <script type="text/javascript"> function changeFontSize(size) { var tfs = '120%'; va ...

  7. 8.1、包，__init__.py,

    包: 为了组织好模块,将多个模块组合为一个包,所以包用于存放python模块 包通常是一个文件夹,当文件夹当作包使用时,文件夹需要包含__init__.py文件 __init__.py的内容可以为空, ...

  8. 解决 jQuery validation插件 valid()方法总是返回true的问题

    在表单元素验证方法中加入了 remote 方法,调试一直返回true,后来才知道因为是异步验证,所以才会出现此问题,解决方法就是在 remote 方法中,禁用 异步和缓存,具体代码如下 : ..... ...

  9. 在Docker Swarm上部署Apache Storm：第2部分

    [编者按]本文来自 Baqend Tech Blog,描述了如何在 Docker Swarm,而不是在虚拟机上部署和调配Apache Storm集群.文章系国内 ITOM 管理平台 OneAPM 编译 ...

  10. .NET、ADO.NET、ASP.NET名称解析及.NET平台架构组成

    转https://blog.csdn.net/xiaouncle/article/details/53265256 名词解释 1.Winform:Windows应用程序.桌面应用程序.C/S应用程序  ...