在运用鼠标移入移出事件时，一般有两种做法，一种是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. CodeForces 47E. Cannon（离线暴力+数学）

    E. Cannon time limit per test 3 seconds memory limit per test 256 megabytes input standard input out ...

  2. 谷歌浏览器插件开发入门-官方版Helloworld详解

    目录: 需求 原理 实现步骤: 一个空的插件 一个可以设置一种背景色的插件(可以设置百度首页的背景色为绿色) 一个可以设置多种背景色的插件 需求: 插件可以改变特定网址的背景颜色. 原理: 将各种ht ...

  3. EF中三大开发模式之DB First,Model First,Code First以及在Production Environment中的抉择

    一:ef中的三种开发方式 1. db first... db放在第一位,在我们开发之前必须要有完整的database,实际开发中用到最多的... <1> DBset集合的单复数... db ...

  4. 【转载】UML类图几种关系的总结

    因为有的时候很久不弄UML图,老是忘记几个常见的连接线的意思,这篇完全说转载:UML类图几种关系的总结 在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Real ...

  5. on where having总结

    1. ON 和WHERE 所有的查询都回产生一个中间临时报表,查询结果就是从返回临时报表中得到.ON和WHERE后面所跟限制条件的区别,主要与限制条件起作用的时机有关, ON根据限制条件对数据库记录进 ...

  6. Windows server 2008 R2安装MySQL 32位ODBC驱动！

    在Windows server 2008 R2安装MySQL 32位ODBC驱动,总是提示错误,我安装了DOTNET4的库,同时安装了VC2008.VC2012.VC2013的支持库,怎么还不行呢?M ...

  7. [Swift]扩展String类：extension String

    请参考本博客另一篇技术博文: <[Swift]字符串(String类.NSString类)常用操作> extension String { //获取字符串首字符 var first: St ...

  8. localstorage在safri下的坑

    在ios10.2中的safri浏览器里无痕模式会导致localstorage不能正常使用 具体解决办法如下: if (typeof localStorage === 'object') { try { ...

  9. hive join的三种优化方式

    原网址:https://blog.csdn.net/liyaohhh/article/details/50697519 hive在实际的应用过程中,大部份分情况都会涉及到不同的表格的连接, 例如在进行 ...

  10. jquery 实现动画效果（各种方法）

    1.show()和hide()和toggle()(这是show和hide的一个综合,一个按钮就实现显示和隐藏) 效果: 代码: <button type="button" c ...