在运用鼠标移入移出事件时，一般有两种做法，一种是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. 对ArrayList（Vector）的排序

    当需要对ArrayList(Vector)里面的元素进行简单的排序时,可以使用Collections.sort();这个方法 import java.util.ArrayList; import ja ...

  2. Reporting Service服务SharePoint集成模式安装配置（3、4、安装sharepoint 2010必备组件及产品）

    Reporting Service服务SharePoint集成模式安装配置 第三步和第四部 第三步 安装sharepoint 2010必备组件 1.安装SharePoint2010必备组件,执行Pre ...

  3. Transcation And Lock--SQL SERVER 事务隔离级别

    SQL SERVER 事务隔离级别:1.未提交读(READ UNCOMMITED)    允许脏读,读取数据时不加共享锁,与使用WITH(NOLOCK)结果相同2.已提交读    不允许脏读,读取数据 ...

  4. MAVEN 编译打包时报“找不到符号”cannot find symbol 的处理方法总结

    http://www.cnblogs.com/Starshot/p/7441075.html

  5. C# 数字转换成汉字大写 数值转换成汉字大写

    1.数字转换成汉字大写 public string NumToChinese(string x) { //数字转换为中文后的数组 //转载请注明来自 http://www.shang11.com st ...

  6. TCP中的seq

    TCP连接中传送的字节流中的每个字节都按顺序编号,第一个字节的编号由本地随机产生 seq其实就是这个报文段中的第一个字节的数据编号. 例如,一段报文的序号字段值是 200 ,而携带的数据共有100字段 ...

  7. CF|codeforces 280C Game on Tree

    题目链接:戳我 大概题意:给一棵树,然后每次可以删除一个子树,问你期望多少次能把整棵树都删完? 概率和期望是个神仙..我不会 对于这个题,我们要有一个前置知识--期望的线性性,就是说总期望的值等于各个 ...

  8. ItemTemplateSelector

    ItemTemplateSelector的中文翻译是模板选择器 是用来选择模板. 他的用法稍有不同,他必须派生于DataTemplateSelector类. 然后重写SelectTemplate这个方 ...

  9. 201621123012 《Java程序设计》第11周学习总结

    作业11-多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread ...

  10. leetcode 48. 旋转图像 java

    class Solution { public void rotate(int[][] matrix) { int n = matrix.length; for (int k = 0; k < ...