html+css（在鼠标悬停时，如何展现出浅绿色的效果）

最新推荐文章于 2024-11-04 19:45:38 发布

sky.fly

最新推荐文章于 2024-11-04 19:45:38 发布

阅读量426

点赞数 2

分类专栏： HTML 文章标签： html css

本文链接：https://blog.csdn.net/2301_81256766/article/details/142290077

版权

HTML 专栏收录该内容

12 篇文章

订阅专栏

如何从第一张变成第二张？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./ll.css">
</head>
<body><div id="main">
    <div class="zong">一级标签
        <div class="er">
            <ul>
                <li class="w1">二级标签</li>
                <li class="w1">二级标签</li>
            </ul></div>
    </div>

    <div class="zong">一级标签
        <div class="er">
            <ul>
                <li class="w1">二级标签</li>
                <li class="w1">二级标签</li>
            </ul></div>
    </div>

    <div class="zong">一级标签
        <div class="er">
            <ul>
                <li class="w1">二级标签</li>
                <li class="w1">二级标签</li>
            </ul></div>
    </div>

    <div class="zong">一级标签
        <div class="er">
            <ul>
                <li class="w1">二级标签</li>
                <li class="w1">二级标签</li>
            </ul></div>
    </div>

    <div class="zong">一级标签
        <div class="er">
            <ul>
                <li class="w1">二级标签</li>
                <li class="w1">二级标签</li>
            </ul></div>
    </div>

    <div class="zong">一级标签
        <div class="er">
            <ul>
                <li class="w1">二级标签</li>
                <li class="w1">二级标签</li>
            </ul></div>
    </div>

    <div class="zong">一级标签
        <div class="er">
            <ul>
                <li class="w1">二级标签</li>
                <li class="w1">二级标签</li>
            </ul></div>
    </div>

    <div class="zong">一级标签
        <div class="er">
            <ul>
                <li class="w1">二级标签</li>
                <li class="w1">二级标签</li>
            </ul></div>
    </div>

</div>

</body>
</html>

#main{
    width: 300px;
    height: 500px;
}
.zong{
    width: 300px;
    height: 105px;
    background-color: green;
    margin: 0%;
}
.er{
    width: 220px;
    height: 75px;
    background-color: greenyellow;
    float: right;
    margin-top: 30px;
   display: none;

    
}
/* 最重要的步骤，后三个*/
.w1{
    list-style: none;
}
.zong:hover .er{
display: block;

}
.er:hover{
    display: none;
}