#学习笔记#(6)mouseenter-mouseleave显示隐藏内容-jQuery

最新推荐文章于 2020-12-21 11:04:00 发布

游走走

最新推荐文章于 2020-12-21 11:04:00 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记 web

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/qq_24734285/article/details/50214733

学习笔记同时被 2 个专栏收录

107 篇文章

订阅专栏

web

93 篇文章

订阅专栏

本文介绍如何利用jQuery实现鼠标悬停时显示指定内容，并在鼠标离开时隐藏内容的功能，通过简单的HTML和CSS布局，配合jQuery的mouseenter和mouseleave事件，实现交互式网页效果。

<pre name="code" class="html"><html>
<head>
<title>mouseenter-mouseleave显示隐藏内容-jQuery</title>
<style type="text/css">
label
{
background-color:green;
color:white;
font-size:22px;
}
.div
{
display:none;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js">
</script> 
</head>
<body>
<label id="label1">标签1</label>
<label id="label2">标签2</label></br>
<p>注：鼠标移动到标签上显示对应内容</p>
<div id="div1" class="div">
<p>这是标题1的内容</p>
</div>
<div id="div2" class="div">
<p>这是标题2的内容</p>
</div>
<script>
$(document).ready(function(){
	$("#label1").mouseenter(function(){$("#div1").css('display','block');});//鼠标移进标签1显示div1的内容
	$("#label2").mouseenter(function(){$("#div2").css('display','block');});//鼠标移进标签2显示div2的内容
	$("#label1").mouseleave(function(){$("#div1").css('display','none');});//鼠标移出标签1隐藏div1的内容
	$("#label2").mouseleave(function(){$("#div2").css('display','none');});//鼠标移出标签2隐藏div2的内容
}
);
</script>
</body>
</html>