JS/jquery实现鼠标控制页面元素显隐

2025-02-09 技术教程

最近因为公司网站要上一个活动广告横幅，当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况，码农们会经常遇到，可以通过javascript或jquery代码实现，下面就几种常见需求一起归纳一下。

mouseout和mouseleave

这里需要特别注意mouseout与mouseleave的区别。我们通过下面代码示例来看一下：

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>鼠标控制页面元素显隐</title><scriptsrc="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><style>#boxout,#boxleave{width:250px;height:100px;padding-top:20px;background-color:#cccccc;float:left;margin-left:30px;}#boxoutson,#boxleaveson{width:200px;height:50px;background-color:yellow;padding:0pxauto;margin:0pxauto;}</style></head><body><divid="boxout"><divid="boxoutson">第<span></span>此触发mouseout事件</div></div><divid="boxleave"><divid="boxleaveson">第<span></span>此触发mouseleave事件</div></div><script>x=0;y=0;$("#boxout").mouseout(function(){$("#boxoutspan").text(x+=1);});$("#boxleave").mouseleave(function(){$("#boxleavespan").text(y+=1);});</script></body></html>

效果如下：

fadeIn和fadeOut

前文实例中用的是show()和hide()方法，前台显隐效果瞬间完成，为了提高实际用户体验，这里我们介绍两位更友好的“朋友”，即fadeIn和fadeOut。

fadeIn：方法使用淡入效果来显示目标元素。
fadeOut：方法使用淡出效果来隐藏目标元素

这两个方法可以配置参数来控制速度，比如slow、normal、fast或指定毫秒数。

下面我们就show()、hide()与fadeIn()、fadeOut()的效果坐下对比，代码如下：

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>鼠标控制页面元素显隐</title><scriptsrc="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><style>#box1,#box2{width:250px;height:100px;padding-top:20px;background-color:#cccccc;float:left;margin-left:30px;}#box1son,#box2son{width:200px;height:50px;background-color:yellow;padding:0pxauto;margin:0pxauto;}</style></head><body><divid="box1"><divid="box1son"><span>hide和show</span></div></div><divid="box2"><divid="box2son"><span>fadeIn和fadeOut</span></div></div><script>$("#box1span").hide();$("#box1").mouseover(function(){$("#box1span").show();}).mouseleave(function(){$("#box1span").hide();});$("#box2span").hide();$("#box2").mouseover(function(){$("#box2span").fadeIn("slow");}).mouseleave(function(){$("#box2span").fadeOut("slow");});</script></body></html>

效果如下：

小结

本文我们一起了解学习了通过js或jq实现鼠标事件控制页面元素显隐效果，方法十分简单。如果大家还有更好的其他解决方案，欢迎一起讨论交流。