这篇文章来自一个偶然。。。
以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的。就是一对名字很相近的事件。一组是onmouseover()和onmouseout()。另一组就是onmouseenter()和onmouseleave()。后来自己看博客加上自己的练习终于搞明白了这两组的区别。ommouseover()和onmouseout()表示鼠标移入和移出时触发。onmouseenter()和onmouseleave()表示的是鼠标穿过和穿出的时候触发。是不是还不太明白。。那么再具体一点就是假设onmouseenter()和onmouseleave()其内部有子元素的话,则在其对象内部穿过子元素时不会触发。很简单看个例子

http://www.jb51.net/article/40560.htm

话说回来像我这样的人怎么可能来分享别人分享过的东西呢,当然是碰到了一个问题哈。等会下面贴代码

最后要达到的效果大概如下图

开始页面只显示一个灰色的框,内容就是“显示”。(图一)

当鼠标移入到显示上边时,效果如下,出现一个浅灰色的表单。表单嵌在一个div里。(图二)

然后当你在鼠标在浅灰色的框内任意移动时,表单还依然在。当你鼠标移出表单时,这个表单就会消失,恢复到图一的状态只有一个“显示”按钮。本来onmouseover加上onmouseout配合使用这个并不会有什么问题,这个表单大概每天都会写到,这个应该算是很基础的东西。

但是问题来了,我这人就是吃饱了没事做,要是只加onmouseout()不加onmouseover()事件时,当移到"显示"上,表单显示,但是从上边移入表单,比如从“显示”移入到输入框时,表单就神奇的消失了。后来也想了一会想不到为什么不加onmouseover()时,移入表表单就会消失,难道这个表单不属于此div吗,于是我又加上了onmouseover()事件,效果又正常了。

     <div id="box">
<p id="show" onmouseover="document.getElementById('login').style.display='block'">显示</p>
<div id="login" onmouseout="document.getElementById('login').style.display='none'"> <!-- div默认不显示 -->
<input type="text" placeholder="网易邮箱"><br>
<input type="password" placeholder="请输入密码">
<div>
<input type="checkbox" style="width:20px;">十天内免登录<span>忘记密码?</span>
<P>免费下载网易官方手机邮箱应用</P>
</div>
<button>登录</button>
</div>
</div>

然后我懂了,这个表单元素是外部div元素的子元素,当从“显示”移到表单的输入框时,不加onmouseover(),只有onmouseout()事件,会立即触发onmouseout()事件,于是就是从“显示”按钮移入表单经过输入框时,表单会消失。当加上onmouseover()时,同样的路线,虽然会触发onmouseout()事件,但同时也会触发onmouseover()事件。于是情况就正常了。。

还有我就想onmouseleave()效果应该等同与同时加上以上两个事件,果不其然,只加onmouseleave()效果不变。原因就是开头说过的假如onmouseenter()和onmouseleave()其内部有子元素的话,则在其对象内部穿过子元素时不会触发。

代码如下

     <div id="box">
<p id="show" onmouseover="document.getElementById('login').style.display='block'">显示</p>
<div id="login" onmouseleave="document.getElementById('login').style.display='none'"> <!-- div默认不显示-->
<input type="text" placeholder="网易邮箱"><br>
<input type="password" placeholder="请输入密码">
<div>
<input type="checkbox" style="width:20px;">十天内免登录<span>忘记密码?</span>
<P>免费下载网易官方手机邮箱应用</P>
</div>
<button>登录</button>
</div>
</div>

于是愉快的解决了问题。。

终。

onmouseover和onmouseout的那些事的更多相关文章

  1. 关于onmouseover和onmouseout的bug

    总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容< ...

  2. JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...

  3. onmouseover和onmouseout的烦恼

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.   非常easy的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会仅仅在移进 ...

  4. 使用HTML DOM 来分配事件 —— onmouseover和onmouseout ,onmousedown和onmouseup

    一, onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 一个小例:鼠标未在 ...

  5. JS:onmouseover 、onmouseout

    鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px ...

  6. 【try..catch..】【判断输入是否为空】【onchange事件】【onmouseover和onmouseout事件】【onmousedown和onmouseup事件】

    1.try..catch.. <body><script>function myFunction(){try{ var x=document.getElementById(&q ...

  7. Repeater控件添加onmouseover和onmouseout事件

    网友有问题,在Repeater控件中,需要添加onmouseover和onmouseout事件功能.Insus.NET有叫他参考<onmouseover和onmouseout在Repeater控 ...

  8. onmouseover和onmouseout的bug

    脑子不好用了,一点东西要看几遍才能记住,学过的东西也要好几遍,悲哀. 习惯了jquery的hover,或者看过hover源码,或者是正美的<框架设计>,onmouseover和onmous ...

  9. HTML事件(onclick、onmouseover、onmouseout、this)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. C#/ASP.NET MVC微信公众号接口开发之从零开发(三)回复消息 (附源码)

    C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...

  2. Top Five Hacker Tools Every CISO Should Understand

    As the role of the CISO continues to evolve within organizations towards that of an executive level ...

  3. JVM-程序编译与代码晚期(运行期)优化

    晚期(运行期)优化 1.为了提高热点代码的执行效率,在运行时,虚拟机将会把这些代码编译成与本地平台相关的机器码,并进行各种层次的优化,完成这个任务的编译器称为即时编译器(Just In Time,JI ...

  4. 北大poj-1062

    昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 43523   Accepted: 12760 Descripti ...

  5. C语言实现快排

    #include <stdio.h> void swap(int *pa, int *pb) { int t = *pa; *pa = *pb; *pb = t; } int partio ...

  6. Polymer.js

    Polymer 1.0 教程 安装 bower install --save Polymer/polymer

  7. LintCode Binary Tree Maximum Path Sum

    Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...

  8. 神奇的盒模型(BFC)

    上一篇我提到每一个元素都有自己的display属性,其属性值可以改变.其改变的方式,可以利用神奇的css盒模型(BFC). 盒模型,是css可视化格式化系统的基础,可以用于元素定位和网页布局.一个盒模 ...

  9. c++作用域运算符---7

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ ::是C++里的“作用域运算符”. 比如声明了一个类A,类A里声明了一个成员函数void f(),但没有 ...

  10. pods的安装和使用

    ////  pods的安装.h//  IOS笔记 /*Cocoapods安装步骤 1.升级Ruby环境 终端输入:$gem update --system 此时会出现 ERROR:  While ex ...