使用伪类hover显示隐藏
程序员文章站
2022-05-22 14:10:21
...
当鼠标移入某标签时，div显示，移出时，div隐藏，并且鼠标在div上时，也是显示的 记录，直接上代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.dropdown {
position: relative;
display: inline-block;
border:1px solid red;
height: 30px;
line-height: 30px;
}
.dropdownMenu {
position: absolute;
left: 0;
top: 25px;
width: 160px;
background: #fff;
border: 2px solid #ccc;
padding: 8px 35px 25px 0;
z-index: 999;
border-top: 0;
border-radius: 0;
box-sizing: content-box;
display: none;
}
.dropdown:hover{
background-color: yellow;
}
.dropdownMenu p {
display: block;
}
.dropdownMenu p:hover{
background-color: red;
}
.dropdown:hover .dropdownMenu{
display: block;
}
</style>
</head>
<body>
<span class="dropdown">
<a href="javascript:void(0);">精选版块</a>
<div style="background: #eaebec;" class="dropdownMenu">
<p>移动开发11</p>
<p>云计算22</p>
<p>分布式计算33</p>
<p>Java技术44</p>
</div>
</span>
<span class="dropdown">
<a href="javascript:void(0);">一般版块</a>
<div style="background: #eaebec;" class="dropdownMenu">
<p>移动开发</p>
<p>云计算</p>
<p>分布式计算</p>
<p>Java技术</p>
</div>
</span>
</body>
</html>效果：当鼠标放在一般模块时，灰色div模块显示，移入到灰色div模块选项上，选项变红色，移出时，灰色div隐藏；如下图：
上一篇： 灰色预测
推荐阅读