在运用鼠标移入移出事件时，一般有两种做法，一种是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. 浅谈HTTPS以及Fiddler抓取HTTPS协议（摘抄）

    一.浅谈HTTPS 我们都知道HTTP并非是安全传输,在HTTPS基础上使用SSL协议进行加密构成的HTTPS协议是相对安全的.目前越来越多的企业选择使用HTTPS协议与用户进行通信,如百度.谷歌等. ...

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

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

  3. 南昌网络赛J. Distance on the tree　树链剖分＋主席树

    Distance on the tree 题目链接 https://nanti.jisuanke.com/t/38229 Describe DSM(Data Structure Master) onc ...

  4. 如何获得Android设备名称(ADB命令详细介绍)

    豌豆荚.360手机管家等软件可以获取android设备名称,显示在界面上,如下图: 我们自己如何来获取设备名称 呢?答案如下: 在命令行中输入“adb shell”进入shell之后,再输入“cat ...

  5. 【maven】---聚合和继承

    前言 自从我知道写maven实战这本书的作者长得随心所欲后,我再拿起这本书真心的不想看前言了.下面分享一下maven中的所谓的聚合和继承. 内容 下文中的子本指的是:多个maven项目. 父本指的是: ...

  6. kali linux之Bdfproxy

    Bdfproxy(mitmproxy) 基于流量劫持动态注入shellcode(arp欺骗,dns欺骗,流氓ap) 步骤: 开启流量转发---------sysctl -w net.ipv4.ip_f ...

  7. [agc004f]Namori 贪心

    Description ​ 现在给你一张NN个点MM条边的连通图,我们保证N−1≤M≤NN−1≤M≤N,且无重边和自环. ​ 每一个点都有一种颜色,非黑即白.初始时,所有点都是白色的. ​ 想通过执行 ...

  8. redis 3.0 集群__安装

    参考文档 http://redis.io/topics/cluster-tutorial http://redis.io/topics/cluster-spec http://redis.readth ...

  9. top 常用命令

    参考文档: http://www.cnblogs.com/allen8807/archive/2010/11/10/1874001.html [root@linux ~]# top [-d] | to ...

  10. String，数组，list集合长度的使用

    public class Use{ public static void main(String[] args){ int[] arr=new int[]{19,10,20,30,23,13}; // ...