技巧:[javascript / css]关于鼠标事件onmousexxx和css伪类ho

使用鼠标移入和移出事件时，通常有两种方法，一种是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         
16         
31         
32     
33     
34         

35             
这个是内容1
36             
这个是内容2
37         
38     
39  

设置了两个相同的块，并将onmouseover和onmouseout事件分别分配给了两个块。

当鼠标不动时：

将鼠标移至内容1：

鼠标移出内容1：

现在让我们尝试使用css的伪类：悬停以实现这种动态效果。

我们以CSS样式添加以下代码：

1 #img2:hover {
2     background: #666;
3 }

稍后查看效果：

将鼠标移至内容2：

移出：

所以您可以看到区别。

CSS是CascadingStyleSheets的缩写，它只能更改元素的样式，而不能动态更改元素的内容，因为前端脚本就是这样做的。

尽管在将鼠标移到元素上时可以使用伪类“：hover”和“ onmouseover”达到相同的效果，但是当元素移出元素时，可以使用伪类“：hover”内容2还原了移入之前的状态，并使用“ onmouseover”内容1来确保保留js对元素所做的更改，并且当该元素绑定到多个事件时，该元素将保持最后一个状态触发的事件。

因此在正常使用中，如果仅出于样式显示的效果，则可以使用CSS的伪类，如果需要动态更改，请选择js事件。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-344534-1.html