图文详解鼠标事件CSS:hover和JS:mouseover的区别

在工作中为了使页面更具有吸引力，前端开发人员经常会在页面中加上鼠标移入和移出的效果。鼠标移入移出的设置，一般有两种方法，一种是单纯用CSS中的hover伪类，另一种可以用JS 中的DOM事件，即onmouseover和onmouseout。接下来这篇文章就和大家讲讲CSS伪类hover和JS鼠标事件mouseover的区别，希望可以帮助到你。

 

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

JavaScript中鼠标事件有：

onmouseover和onmouseout： 当鼠标移入和移出时触发事件

onmousedown和onmouseup： 当鼠标按钮被按下或者松开时触发事件

onclick和ondbclick ：当鼠标单击或者双击时触发事件

onmousemover ：当鼠标移动时触发事件

CSS：hover是css中的一种伪类选择器，指鼠标移入然后移出的过程，这个操作可以改变元素的样式，而且它相应的子类也被改变。但无法改变元素的内容。比如，鼠标经过实现弹出窗口的效果，它用的是onmousemove实现的，如果用hover则没办法做出这样的效果。

可能文字描述不是很好理解，接下里，举例个例子，看看hover和mouseover，mouseout之间有什么不同，结合图片看就一目了然了。</