本章给大家带来用JS/jquery实现鼠标事件控制页面元素显隐效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、mouseout和mouseleave
对于鼠标指针的移入和移出，就涉及到了mouseover、mouseout和mouseleave事件。
mouseover：当鼠标指针移到目标元素时触发该事件；
mouseout：当鼠标指针移出目标元素或其子元素时，都会触发该事件；
mouseleave：只有到鼠标指针移出目标元素时，才会触发该事件；
这里需要特别注意mouseout与mouseleave的区别。我们通过下面代码示例来看一下：
鼠标控制页面元素显隐 第次触发mouseout事件第次触发mouseleave事件
效果图：
二、fadeIn和fadeOut
前文实例中用的是show()和hide()方法，前台显隐效果瞬间完成，为了提高实际用户体验，这里我们介绍两位更友好的“朋友”，即fadeIn和fadeOut。
fadeIn：方法使用淡入效果来显示目标元素。
fadeOut：方法使用淡出效果来隐藏目标元素
这两个方法可以配置参数来控制速度，比如slow、normal、fast或指定毫秒数。
下面我们就show()、hide()与fadeIn()、fadeOut()的效果坐下对比，代码如下：
鼠标控制页面元素显隐 hide和showfadeIn和fadeOut
鼠标没有移动上去的效果图：
鼠标移动上去的效果图：
