解决mouseover闪烁的问题

问题原因：
当鼠标移入一个元素，需要在该元素旁显示一个层，显示层遮住了添加事件的元素，所以反复执行 。
onmouseover onmouseout。

查资料总结：
方法一：把mouseover和mouseout换成对应的mouseenter和mouseleave。

当鼠标指针位于元素上方时，会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。

注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

方法二：
给遮罩层添加css样式，pointer-events: none;
这是用来阻止元素上的事件的。使用了这个，在该元素上进行任何JS操作等都会失效。

mdn上关于这个属性的解释是：

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

意思就是添加了这个属性的元素在什么情况下可以成为鼠标事件的 target

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

当元素的 pointer-events 属性取值为 none 的时候，表示该元素不是鼠标事件的目标元素，并且鼠标事件穿透该元素指定它下面的元素。