在运用鼠标移入移出事件时，一般有两种做法，一种是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. vs2008编译opencv，不能copy CMakeVSMacros2.vsmacros

    由于学习opencv,要查看源码文件,所以要先对opencv进行编译,可悲的是出错了 “不能copy   CMakeVSMacros2.vsmacros” 通过上网查找资料,之所以出现这种情况,是因为 ...

  2. django That port is already in use

    python 直接在命令行里启动,如果取消运行,可能会报错,解决方法如下 ps aux | grep -i manage 找出manage.py 对应的pid号码 第二步删除对应的进程 kill -9 ...

  3. C# DataGridView添加右键菜单的简单应用

    首先,参考了下以下文章: https://blog.csdn.net/qin_zhangyongheng/article/details/23773757 感谢. 项目中要在DataGridView中 ...

  4. docker-compsoe & .netcore & nginx

    1.引言 紧接上篇.NET Core容器化@Docker,这一节我们先来介绍如何使用Nginx来完成.NET Core应用的反向代理,然后再介绍多容器应用的部署问题. 2. Why Need Ngin ...

  5. [51nod] 1090 3个数和为0 暴力+二分

    给出一个长度为N的无序数组,数组中的元素为整数,有正有负包括0,并互不相等.从中找出所有和 = 0的3个数的组合.如果没有这样的组合,输出No Solution.如果有多个,按照3个数中最小的数从小到 ...

  6. kali linux之Backdoor-factory

    Backdoor-------python编写 适用于windows PE x32/x64 和Linux ELF x32/x64(OSX),支持msf payload 自定义payload 将shel ...

  7. 【loj#6503.】「雅礼集训 2018 Day4」Magic（生成函数+容斥）

    题面 传送门 题解 复杂度比较迷啊-- 以下以\(n\)表示颜色总数,\(m\)表示总的卡牌数 严格\(k\)对比较难算,我们考虑容斥 首先有\(i\)对就代表整个序列被分成了\(m-i\)块互不相同 ...

  8. 性能分析工具VisualVM for eclipse安装过程总结

    Java VisualVM Java VisualVM is a tool that provides a visual interface for viewing detailed informat ...

  9. P3866 [TJOI2009]战争游戏 最小割

    $ \color{#0066ff}{ 题目描述 }$ 小R正在玩一个战争游戏.游戏地图是一个M行N列的矩阵,每个格子可能是障碍物,也可能是空地,在游戏开始时有若干支敌军分散在不同的空地格子中.每支敌军 ...

  10. EndNote同步功能<Sync>

    EndNote的同步功能Sync可以把本地文献和网络云文献进行同步,如何进行同步,同步过程中需要注意什么,本文就EndNote的同步功能Sync作一图文说明. 一直对EndNote的同步功能Sync不 ...