首页 > 代码库 > 【javascript/css】关于鼠标事件onmousexxx和css伪类hover
【javascript/css】关于鼠标事件onmousexxx和css伪类hover
在运用鼠标移入移出事件时，一般有两种做法，一种是DOM事件的"onmouseover"和"onmouseout"，还有一种是css的伪类":hover"。
在实际运用中如何选择，取决于清楚明白的了解他们之间的区别。
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
在我们为元素绑定了一个事件，当事件发生的时候，可以执行一段javascript代码。
关于鼠标事件，总共有：
onmouseover和onmouseout 鼠标指针移动到或离开元素时触发脚本
onmousedown和onmouseup 鼠标按钮被按下或松开时触发脚本
onclick和ondbclick 鼠标单击和双击时触发脚本
onmousemover 鼠标指针移动时触发脚本
鼠标事件的使用方法大同小异，即在元素标签内分配事件属性，然后将需要执行的javascript代码放置到事件触发的函数内，当我们点击该元素时，就会触发相应javascript代码。
例如：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="Content-Language" content="utf-8" /> 6 <script type="text/javascript"> 7 function over(obj){ 8 obj.innerHTML = "进来了"; 9 obj.style.background = "red";10 }11 function out(obj){12 obj.innerHTML = "出去了";13 obj.style.background = "#666"; 14 }15 </script>16 <style type="text/css">17 #box {18 width: 400px;19 border: 2px solid;20 margin: 200px auto;21 line-height: 100px;22 text-Align: center;23 }24 #img1,#img2 {25 height: 100px;26 margin: 2px;27 background: #ccc;28 }29 30 </style>31 <title>opacity</title>32 </head>33 <body>34 <div id="box">35 <div id="img1" onm ouseover="over(this)" onm ouseout="out(this)">这个是内容1</div>36 <div id="img2">这个是内容2</div>37 </div>38 </body>39 </html>
设立了2个相同的块，分别给2个块分配了鼠标指针移动到元素以及移出元素的事件onmouseover和onmouseout。
鼠标没有动作时：
鼠标移动到内容1上：
鼠标移出内容1:
现在我们来尝试用css的伪类:hover达到这种动态效果。
我们在css样式中添加如下代码：
1 #img2:hover {2 background: #666;3 }
随后看看效果：
把鼠标移动到内容2上：
移出：
这样就能看出区别了。
CSS 是层叠样式表 (Cascading Style Sheets)的缩写，只能对元素的样式做出改变，而无法对元素的内容动态更改，因为那是前端脚本所做的事。
还有当鼠标移到元素上时，使用伪类":hover"和"onmouseover"虽然在一定程度上能够达到同样的效果，不过当移出元素后，运用了伪类":hover"的内容2恢复了移入前的状态，而运用了"onmouseover"的内容1确保持了js对元素的更改，并且当元素绑定了多个事件时，元素保持最后一个触发的事件的状态。
所以在平时的使用中，如果仅止为了样式显示的效果，可以使用CSS的伪类，如果需要动态改变，则选择js的事件。
【javascript/css】关于鼠标事件onmousexxx和css伪类hover