在运用鼠标移入移出事件时，一般有两种做法，一种是DOM事件的"onmouseover"和"onmouseout"，还有一种是css的伪类":hover"。

　　在实际运用中如何选择，取决于清楚明白的了解他们之间的区别。　

　　HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

　　在我们为元素绑定了一个事件，当事件发生的时候，可以执行一段javascript代码。

　　关于鼠标事件，总共有：

　　　　onmouseover和onmouseout 鼠标指针移动到或离开元素时触发脚本

　　　　onmousedown和onmouseup 鼠标按钮被按下或松开时触发脚本

　　　　onclick和ondbclick 鼠标单击和双击时触发脚本

　　　　onmousemover 鼠标指针移动时触发脚本

　　鼠标事件的使用方法大同小异，即在元素标签内分配事件属性，然后将需要执行的javascript代码放置到事件触发的函数内，当我们点击该元素时，就会触发相应javascript代码。

　　例如：

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

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

     <head>

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

         <meta http-equiv="Content-Language" content="utf-8" />

         <script type="text/javascript">

             function over(obj){

                 obj.innerHTML = "进来了";

                 obj.style.background = "red";

             }

             function out(obj){

                 obj.innerHTML = "出去了";

                 obj.style.background = "#666";

             }

         </script>

         <style type="text/css">

             #box {

                 width: 400px;

                 border: 2px solid;

                 margin: 200px auto;

                 line-height: 100px;

                 text-Align: center;

             }

             #img1,#img2 {

                 height: 100px;

                 margin: 2px;

                 background: #ccc;

             }

         </style>

         <title>opacity</title>

     </head>

     <body>

         <div id="box">

             <div id="img1" onmouseover="over(this)" onmouseout="out(this)">这个是内容1</div>

             <div id="img2">这个是内容2</div>

         </div>

     </body>

 </html>

　　设立了2个相同的块，分别给2个块分配了鼠标指针移动到元素以及移出元素的事件onmouseover和onmouseout。

　　鼠标没有动作时：

　　

　　鼠标移动到内容1上：

　　

　　鼠标移出内容1:

　　　　

　　现在我们来尝试用css的伪类:hover达到这种动态效果。

　　我们在css样式中添加如下代码：　

 #img2:hover {

     background: #666;

 }

　　随后看看效果：

　　把鼠标移动到内容2上：

　　

　　移出：

　　

　　这样就能看出区别了。

　　CSS 是层叠样式表 (Cascading Style Sheets)的缩写，只能对元素的样式做出改变，而无法对元素的内容动态更改，因为那是前端脚本所做的事。

　　还有当鼠标移到元素上时，使用伪类":hover"和"onmouseover"虽然在一定程度上能够达到同样的效果，不过当移出元素后，运用了伪类":hover"的内容2恢复了移入前的状态，而运用了"onmouseover"的内容1确保持了js对元素的更改，并且当元素绑定了多个事件时，元素保持最后一个触发的事件的状态。　

　　所以在平时的使用中，如果仅止为了样式显示的效果，可以使用CSS的伪类，如果需要动态改变，则选择js的事件。

【javascript/css】关于鼠标事件onmousexxx和css伪类hover的更多相关文章

  1. CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

    一.定位 所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿 定位就是改变元素在页面上的默认位置 分类: 普通流定位(元素默认的定位方式) 浮动定位 相对定位 绝对定位 固定定位 1.普通 ...

  2. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  3. 关于css伪类:hover的用法

    关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就 ...

  4. CSS禁止鼠标事件---pointer-events:none

    pointer-events:none顾名思意,就是鼠标事件拜拜的意思.元素应用了该CSS属性,链接啊,点击啊什么的都变成了“浮云牌酱油”.

  5. CSS 高级：尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

  6. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  7. 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序

    在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...

  8. CSS躬行记（2）——伪类和伪元素

    一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...

  9. CSS 属性 :before && :after的用法，伪类和伪元素的区别

    一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...

随机推荐

  1. Application.DoEvent和定时刷新控件

    我们写一个textbox,让其依循环递增,但每次都会出现假死现象,等循环结束后,变为最终值.今天总结一下: private void button3_Click(object sender, Even ...

  2. ExtractStrings字符串截取

    //分割字符串 ExtractStrings var   s: String;   List: TStringList; begin   s := 'about: #delphi; #pascal, ...

  3. C#面向对象：多态

    此文章转载网站:https://www.cnblogs.com/qixinbo/p/8244583.html 多态: 有多态之前必须要有继承,只有多个类同时继承了同一个类,才有多态这样的说法. 在继承 ...

  4. 一文读懂加固apk的开发者是怎么想的

    有人说加固会明显拖慢启动速度,同时造成运行卡顿,严重降低用户体验,而且加固是完全可以脱壳的,只需要pc配合进行断点调试就能抓到解密后的dex文件,加固并没有所说的那么安全. 但是为什么还有一大批开发者 ...

  5. docker安装与基本配置

    Docker有很多种安装的选择,我们推荐您在Ubuntu下面安装,因为docker是在Ubuntu下面开发的,安装包测试比较充分,可以保证软件包的可用性.Mac, windows和其他的一些linux ...

  6. 「HNOI 2013」消毒

    题目链接 戳我 \(Solution\) 我们首先想一想如果这一题只是二维的该怎么办? 就是一个最小点覆盖问题.这里就不详细解释了,用网络流或匈牙利都无所谓. 但现在是三维的,那么现在该如何处理呢? ...

  7. mysql 启动提示：错误2系统找不到指定文件

    详情见这个方法 其实就是更改了启动目录导致的 https://blog.csdn.net/su749520/article/details/78963878

  8. Chat Order （map映射）

     Chat Order Time Limit:3000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit ...

  9. spring-第二章-AOP

    一,回顾 1.控制反转(IOC) 以前创建对象,由我们自己决定,现在我们把管理对象的声明周期权力交给spring; 2.依赖注入(DI) A对象需要B对象的支持,spring就把B注入给A,那么A就拥 ...

  10. [Winter Vacation] 语文实词虚词练习册答案

    下载通道: [120个文言文实词小故事] [18个文言文虚词小故事] 120个文言文实词小故事 爱   楚人爱(宠爱)其子,虽爱(吝惜)钱财,于其子之求而无不应.其子成人,有陶氏之风独爱(喜爱)菊,众 ...