<!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. ubuntn中root密码设置和权限给予

    个人理解: 1.安装ubuntn,会首先要求有一个账号密码设置,比如我设置的:用户名irt,密码**,这是一个普通账户,此时,超级管理账户root密码是空的: 2.给root账户设置密码,大概步骤见下 ...

  2. Windows7安装 nginx+php 后访问.php文件出现 “No input file specified.” 的解决办法

    在Windows7上安装了Nginx+PHP,参考教程为 https://www.cnblogs.com/anlia/p/5916758.html 启动 nginx 后,在浏览器中输入localhos ...

  3. memset初始化数组的问题

    今天才搞清楚,memset用于初始化数组,仅能初始化为0值,而不能初始化一个特定的值,这怎么能模糊了呢??? 因此,如果对申请的一段存放数组的内存进行初始化,每个数组元素均初始化为特定的值,必须使用循 ...

  4. 学习笔记（2）——实验室集群LVS配置

    查看管理结点mgt的网卡信息,为mgt设置VIP [root@mgt ~]# ifconfig eth0 Link encap:Ethernet HWaddr 5C:F3:FC:E9:: inet a ...

  5. 网络基础 HTTP协议之http url简介

    HTTP协议之http url简介 by:授客 QQ:1033553122 http url简介 http url通过http协议,用于定位网络资源,是一种特殊类型的URI(统一资源定位) http_ ...

  6. SQLServer 学习笔记之超详细基础SQL语句 Part 1

    Sqlserver 学习笔记 by:授客 QQ:1033553122 1创建数据库 格式: CREATE DATABASE database_name ON PRIMARY(在组文件组中指定文件) ( ...

  7. 风险指针（Hazard Pointer） 内存空间共享模型

    WiredTiger是一种高性能的开源存储引擎,现已在MongoDB中作为内模式应用.WiredTiger支持行存储.列存储两种存储模式,采用LSM Tree方式进行索引记录 WiredTiger支持 ...

  8. Azure 中虚拟机的计划内维护

    Azure 定期执行更新,以提高虚拟机的主机基础结构的可靠性.性能及安全性. 此类更新包括修补宿主环境(例如操作系统.虚拟机监控程序以及主机上部署的各种代理)中的软件组件.升级网络组件以及硬件解除授权 ...

  9. 使用环信开发项目遇到错误提示 configure your build for VectorDrawableCompat

    问题描述:在使用AndroidStudio开发项目时,使用环信重写了聊天界面后,运行时app就崩掉了,查看日志报告,提示报错如下: java.lang.RuntimeException: Unable ...

  10. SDN期末作业博客

    一.项目描述 A P4-based Network Load Balancing Application 基于P4的网络负载均衡项目 二.个人分工 The Controller : Acquire t ...