[css] 鼠标事件css的:hover和js的mouseover有什么区别？

0. :hover为CSS伪类，mousehover为JS DOM事件。

1. CSS只能改变元素样式，JS既可以改变元素样式又可以改变元素中的内容。

2. :hover当鼠标移出后恢复之前的样式，mouseover需要结合mouseout才能恢复之前的样式

3. 同等效果下，从性能上讲，:hover优于mousehover

   水平有限只能想到这些，希望能抛砖引玉，向大牛们多多学习

1. css：hover 伪类选择器 悬停事件，一般是鼠标移到链接上时添加的特殊样式。也可以在元素上面，使用方法 为元素或者链接：hover{添加的样式}
2. mouseover 当鼠标指针位于元素上方时，会触发 mouseover 事件，mouseover 事件在鼠标指针进入被选元素或任意子元素时都会被触发。通常与mouseout一起使用。使用方法mouseover() 方法触发 mouseover 事件，或添加当发生 mouseover 事件时运行的函数。

JavaScript中鼠标事件有：

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

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

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

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

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

  总结：CSS只能改变元素的样式，无法改变元素的内容，如果要改变内容应该使用JavaScript鼠标事件onmouseover和onmouseout。所以只是为了样式效果，用CSS的伪类hover，如果需要动态改变，则选择js的事件。

js的事件有冒泡，css的:hover没有冒泡