JS/jquery实现鼠标事件控制页面元素显隐（代码实例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS/jquery实现鼠标事件控制页面元素显隐（代码实例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2723字，纯文字阅读大概需要4分钟。
内容图文
本章给大家带来用JS/jquery实现鼠标事件控制页面元素显隐效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、mouseout和mouseleave
对于鼠标指针的移入和移出，就涉及到了mouseover、mouseout和mouseleave事件。
mouseover：当鼠标指针移到目标元素时触发该事件；
mouseout：当鼠标指针移出目标元素或其子元素时，都会触发该事件；
mouseleave：只有到鼠标指针移出目标元素时，才会触发该事件；
这里需要特别注意mouseout与mouseleave的区别。我们通过下面代码示例来看一下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制页面元素显隐</title>
<script src="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: 0px auto;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="boxout">
<div id="boxoutson">
第<span></span>次触发mouseout事件
</div>
</div>
<div id="boxleave">
<div id="boxleaveson">
第<span></span>次触发mouseleave事件
</div>
</div>
<script>
x = 0;
y = 0;
$("#boxout").mouseout(function() {
$("#boxout span").text(x += 1);
});
$("#boxleave").mouseleave(function() {
$("#boxleave span").text(y += 1);
});
</script>
</body>
</html>
效果图：
二、fadeIn和fadeOut
前文实例中用的是show()和hide()方法，前台显隐效果瞬间完成，为了提高实际用户体验，这里我们介绍两位更友好的“朋友”，即fadeIn和fadeOut。
fadeIn：方法使用淡入效果来显示目标元素。
fadeOut：方法使用淡出效果来隐藏目标元素
这两个方法可以配置参数来控制速度，比如slow、normal、fast或指定毫秒数。
下面我们就show()、hide()与fadeIn()、fadeOut()的效果坐下对比，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标控制页面元素显隐</title>
<script src="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: 0px auto;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="box1">
<div id="box1son">
<span>hide和show</span>
</div>
</div>
<div id="box2">
<div id="box2son">
<span>fadeIn和fadeOut</span>
</div>
</div>
<script>
$("#box1 span").hide();
$("#box1").mouseover(function() {
$("#box1 span").show();
}).mouseleave(function() {
$("#box1 span").hide();
});
$("#box2 span").hide();
$("#box2").mouseover(function() {
$("#box2 span").fadeIn("slow");
}).mouseleave(function() {
$("#box2 span").fadeOut("slow");
});
</script>
</body>
</html>
鼠标没有移动上去的效果图：
鼠标移动上去的效果图：
以上就是JS/jquery实现鼠标事件控制页面元素显隐（代码实例）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的JS/jquery实现鼠标事件控制页面元素显隐（代码实例）全部内容，希望文章能够帮你解决JS/jquery实现鼠标事件控制页面元素显隐（代码实例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。