说道hover和mouseover，mouseout的区别，不得不联系到mouseenter，mouseleave。
mouseover,mouseout是指鼠标指针在穿过/离开被选元素或其子元素时触发。
mouseenter，mouseleave是指鼠标指针在穿过/离开被选元素时触发。
举个简单例子:
<div class="wapper">
<h1></h1>
<p></p>
</div>
<div class="buttom"></div>
当鼠标移动到wapper上时类名为buttom的div变大，鼠标离开时恢复原样。
我们使用mouseover,mouseout。当鼠标在<h1>和<p>标签之间来回移动时类名为buttom的div会不断变大，回复原样。
而mouseenter，mouseleave就不会出现这种情况。
而hover的效果等同于mouseenter，mouseleave。