想要实现当鼠标靠近就会显示盒子的内容,就例如代码如下:
- 代码如下:
(1)CSS
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.box {
width: 100%;
height: 0 auto;
background: antiquewhite;
}
.maxBox {
width: 100%;
height: 0 auto;
padding: 20px;
/* 相对定位 */
position: relative;
}
.minBox {
/* 绝对定位 */
position: absolute;
}
.minBox ul li,
.down {
/* 将内容变成行块标签 */
display: inline-block;
}
.distance{
margin: 0px 10px;
}
/* 装饰盒子 */
.down {
/* 适量就好 */
width: 70px;
height: 0 auto;
border: 1px solid green;
border-radius: 5px;
box-shadow: 0 0 5px #000;
text-align: center;
background: #fff;
/* 超出就隐藏 */
overflow: hidden;
/* 将内容隐藏起来 */
display: none;
/* 固定定位 */
position: fixed;
/* 让盒子向下移一点 */
margin-top: 2px;
}
.down li {
/* 设置宽度,让其背景颜色覆盖到全部内容 */
width: 100%;
padding: 5px 2px;
cursor: pointer;
}
.down li:hover {
background: #ccc;
}
(1)HTML
<!-- 整体布局 -->
<div class="box">
<!-- 大盒子,作为父亲的存在 -->
<div class="maxBox">
<!-- 小盒子,作为儿子的存在 -->
<div class="minBox">
<ul>
<li class="distance">
<a href="#">粉丝</a>
<ul class="down">
<li><a href="#">由高到低</a></li>
<li><a href="#">由低到高</a></li>
</ul>
</li>
<li class="distance">
<a href="#">信息</a>
<ul class="down">
<li><a href="#">语文</a></li>
<li><a href="#">数学</a></li>
<li><a href="#">英语</a></li>
</ul>
</li>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210611214800845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dxeTE4Mzc4NjcxMjYx,size_16,color_FFFFFF,t_70#pic_center)
</ul>
</div>
</div>
</div>
<script src="./jquery-3.3.1.min.js"></script>
<script>
$(".minBox ul li").hover(function(){
$(this).find("ul").show();
},function(){
$(this).find("ul").hide();
})
</script>
- 效果图如下: