css中的伪类on,【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

2

3

4

5

6

7 functionover(obj){8 obj.innerHTML = "进来了";9 obj.style.background = "red";10 }11 functionout(obj){12 obj.innerHTML = "出去了";13 obj.style.background = "#666";14 }15

16

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

31

opacity

32

33

34

35

这个是内容1

36

这个是内容2

37

38

39

设立了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的事件。

原文：http://www.cnblogs.com/linxiong945/p/4081481.html