使用伪类hover显示隐藏

最新推荐文章于 2022-08-10 18:45:28 发布

遇上方可知

最新推荐文章于 2022-08-10 18:45:28 发布

阅读量3.7k

点赞数 3

分类专栏： div a an's 文章标签： x

本文链接：https://blog.csdn.net/crystalHy/article/details/82151356

版权

div 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

an's

1 篇文章 0 订阅

订阅专栏

当鼠标移入某标签时，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隐藏；如下图：