标签：style blog http io color ar 使用 java sp
在运用鼠标移入移出事件时，一般有两种做法，一种是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" onmouseover="over(this)" onmouseout="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
标签：style blog http io color ar 使用 java sp
原文地址：http://www.cnblogs.com/linxiong945/p/4081481.html
