jquery的hover mouseover mouseout mouseenter mouseleave的区别

1.mouseover mouseout

mouseover - 鼠标指针经过任何子元素都会触发绑定在父元素上的mouseover事件

mouseout - 鼠标指针离开任何子元素时都会触发父元素上的mouseover事件

然后，你把代码拷贝过去try一下，就会有更深刻的理解；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

  $(function (){

       var outer=$("#outer");

       outer.mouseover(function (){

           alert('outer mouseover');

       }).mouseout(function (){

            alert('outer mouseout');

       })

       //当子元素的over 和 out事件发生时，

       //事件会冒泡到父级，也就是说outer上的 over 和 out 会被触发

       var inner=$("#inner");

       inner.mouseover(function (){

             alert('inner mouseover');

       }).mouseout(function (){

              alert('inner mouseout');

       })

  })

</script>

<style type="text/css">

.outer{

    height:100px;

    width:20%;

    background-color:green;

    float:left;

    margin-left:25px;

}

.inner{

    height:50px;

    width:60%;

    margin:25px auto;

    background-color:red;

}

</style>

</head>

<body>

  <div id="outer" class="outer">

   <div id="inner" class="inner"></div>

  </div>

</body>

</html>

2.mouseenter mouseleave

mouseenter - 鼠标指针经过绑定的元素时触发事件，经过其子元素时，不会触发事件

mouseleave - 只有当鼠标离开绑定的元素时才会触发该事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    $(function (){

       var outer1=$("#outer1");

       outer1.mouseenter(function (){

           alert('outer1 mouseenter');

       }).mouseleave(function (){

            alert('outer1 mouseleave');

       })

       var inner1=$("#inner1");

       inner1.mouseenter(function (){

             alert('inner1 mouseenter');

       }).mouseleave(function (){

              alert('inner1 mouseleave');

       })

  })

</script>

<style type="text/css">

.outer{

    height:100px;

    width:20%;

    background-color:green;

    float:left;

    margin-left:25px;

}

.inner{

    height:50px;

    width:60%;

    margin:25px auto;

    background-color:red;

}

</style>

</head>

<body>

 <div id="outer1" class="outer">

    <div id="inner1" class="inner"></div>

  </div>

</body>

</html>

houver：

hover！= mouseover+mouseout

hover=mouseenter + mouseleave

  $(function (){

     //我们的hover是这样定义的;

    hover: function( fnOver, fnOut ) {

    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );

     }

  })

jquery的hover mouseover mouseout mouseenter mouseleave的区别的更多相关文章

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

    1.前言 今天下午参加一个面试,对方问我写不写博客,这时候才猛然意识到好久没写东西了.最近一直在外边实习,每天有很多经历和挑战,但是却没有及时地记录下来,这一点必须得批评自己,以后得经常把自己遇到的问 ...

  2. 关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别

    轮播中大多会选择mouseover和mouseout  这个时候是没有任何问题的 但当遇到有css3动画的时候,会发现移入移出过快 动画还没加载完成就需要执行下一个动画,完了动画样式就错乱了. 这时候 ...

  3. 你可能不知道的mouseover/mouseout mouseenter/mouseleave

    mouseover与mouseenter 1. 触发时机 mouseover在被监听的节点与子节点上都会触发 mouseenter只在被监听的节点上触发 本质上是因为mouseenter不能冒泡 2. ...

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

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

  5. 理解mouseover,mouseout,mouseenter,mouseleave

    mouseover定义和用法 当鼠标指针位于元素上方时,会发生 mouseover 事件. 该事件大多数时候会与 mouseout 事件一起使用. mouseover() 方法触发 mouseover ...

  6. mouseover,mouseout和mouseenter,mouseleave的区别及适用情况

    在做类似于百度地图右下角,不同地图切换UI时,遇到了问题. 就是鼠标滑过的时候出现一个层,当鼠标滑到当前层的话mouseover和mouseout在低版本的浏览器会出现闪动的现象,最简单的那就是把mo ...

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

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

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

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

  9. mouseover和mouseenter，mouseout和mouseleave的区别-引发的探索

    相信小伙伴们都用过鼠标事件,比如mouseover和mouseout,mouseenter和mouseleave.它们都分别表示鼠标移入移出. 在使用的过程中,其实一直有个小疑问——它们之间究竟有什么 ...

随机推荐

  1. HDU 4632 Palindrome subsequence(DP)

    题目链接 做的我很无奈,当时思路很乱,慌乱之中,起了一个想法,可以做,但是需要优化.尼玛,思路跑偏了,自己挖个坑,封榜之后,才从坑里出来,过的队那么多,开始的时候过的那么快,应该就不是用这种扯淡方法做 ...

  2. oracle存储过程、声明变量、for循环|转|

    oracle存储过程.声明变量.for循环 1.创建存储过程 create or replace procedure test(var_name_1 in type,var_name_2 out ty ...

  3. 你们以为运营商只是HTTP插点广告而已么?

    国内某邮件服务商,近期在某南方地区有大量客户反应登录时出错和异常,于是工作人员进行了一下跟进,发现如下: 首先,邮件服务商登陆页面为普通HTTP协议发送,提交时通过JS进行RSA加密(没错,JS的RS ...

  4. Jquery - Select 和 Checkbox 、Textarea的操作

    Checkbox //判断是否选中 if ($(this).is(':checked')) { alert("它处于选中状态"); } else { alert("它不处 ...

  5. 《GK101任意波发生器》升级固件发布（版本：1.0.2.build124）

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build124 编译日期:2014-08-19 ====================================== 二. ...

  6. 配置SMarty解析

    在 common/main.php中配置 View 组件 'view' => [ 'renderers' => [ 'tpl' => [ 'class' => 'yii\sma ...

  7. 如何用JavaScript在页面上显示一个时间钟表

    <html><head><script type="text/javascript">function myTime(){var today=n ...

  8. ASP.NET MVC3系列页面缓存、缓存依赖SQL(真实项目注意细节)

    缓存依赖数据库 第一步 1通过vs里面带的命令提示窗口. 2或者.NET Framework 版本 4(64 位系统)条件,%windir%\Microsoft.NET\Framework64\v4. ...

  9. Nginx 笔记与总结（13）Nginx 的 gzip 压缩

    使用 FireFox(40.0)访问博客园(http://www.cnblogs.com/),观察 http 头信息 请求头信息: Accept-Encoding gzip, deflate 表示浏览 ...

  10. ThinkPHP 3.2.2 视图模板中使用字符串截取函数

    在项目的 Common/function.php 文件里( 项目结构如图 ) 添加函数: /*字符串截断函数+省略号*/ function subtext($text, $length) { if(m ...