CSS3伪类和JavaScript鼠标滑进划出事件的区别

我们在编程的时候往往都有多事件效果，它们基本上都是通过CSS和JavaScript来实现的，可是有的一些事件是类似的，但CSS3和JavaScript却不能互相替代 ，就例如一个鼠标滑进划出的一个效果，在CSS3这边呢是通过一个 hover伪类来完成的如下图

若是在JavaScript那边呢，是通过一个onmouseover鼠标移入事件和一个onmouseout鼠标移出事件来共同完成的。

既然都是鼠标移进移出事件效果，那么为什么它们不能互相替代来使用呢？

虽然它们都是鼠标移进移出触发效果，但是它们的区别在于CSS3伪类hover的效果只针对自己一个单一的元素有效果，也就是鼠标移进移出能触发效果的只能是那个触发元素的本身，而不能施加效果到别的元素，下面是CSS3的伪类效果：



红色笔迹圈住的地方为鼠标所在地方
由上面3张图片我们可以看出CSS3的伪类的效果只能赋予它那个元素自己本身，
而JavaScript的鼠标移进移出事件呢？ JavaScript的nmouseover鼠标移入事件和onmouseout鼠标移出事件它们针对的是所有的元素，不管鼠标移进移出的是哪一个元素，它都可以让别的元素受到影响。下面是通过JavaScript来实现的鼠标移进移出效果：

                             红色笔迹圈住的地方为鼠标所在地方

由上面3张图片我们可以看出JavaScript的nmouseover鼠标移入事件和onmouseout鼠标移出事件它们鼠标移进移出一个元素是可以让那个元素本身以及本身以外所以的元素发生效果改变的。
由此可以发现CSS3的伪类效果是单一性的，它每次只能让一个元素效果改变。而JavaScript的nmouseover鼠标移入事件和onmouseout鼠标移出事件是全局性的，它可以让所有的元素都发生效果改变。