CSS的hover伪类与JS的onmouseover事件对比

发表于 更新于

两者共同特点：可以在鼠标移入、移出时添加效果。

但是在作用的方式和范围上有所区别。

CSS

1
2
.father:hover ~ .activate{display:inline-block;}
.father:hover ~ .off{display:none;}

作用方式：改变CSS属性。

作用范围：使用CSS选择器来决定对象。

优点：

简洁，易使用，不需要JS，在绝大多数网站上可以使用。

缺点：

CSS选择器在实现复杂的定位时有些困难，如控制另一父容器中的内容。

仅能改变样式，不能改变内容（虽然可以通过改变不同内容的属性来实现切换，但是不能实现增删等复杂操作）。

仅有笼统的hover不支持更为细分的事件。

JS

1
2
3
4
5
6
7
8
functionover(obj){
obj.innerHTML = "鼠标移入";
obj.style.display = "inline-block";
}
functionout(obj){
obj.innerHTML = "移出了";
obj.style.display = "none";
}

作用方式：JS的DOM方法。

作用范围：无限制（JS）。

优点：强大，有更为细分的事件（in、out等），可以配合其他JS函数实现更多效果。

缺点：需要JS，在某些限制JS使用的网站无法使用（防止跨站脚本攻击）。