CSS基础2-悬停

来源：互联网发布：个人淘宝店铺转让编辑：程序博客网时间：2024/05/22 15:34

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding:0;        }        li a{            display: inline-block;            width: 200px;            height: 50px;            background-color: #0f9ae0;            text-decoration: none;            text-align: center;            line-height: 50px;            color: #aa3333;        }        li .home{            background-color: red;        }        .child{            display: none;        }        .parent:hover .child{            display: block;        }        .child li a:hover{            background-color: yellow;        }    </style></head><body><ul class="parent">    <li>        <a href="#" class="home">首页</a>        <ul class="child">            <li><a href="#">企业信息</a></li>            <li><a href="#">企业信息</a></li>            <li><a href="#">企业信息</a></li>            <li><a href="#">企业信息</a></li>            <li><a href="#">企业信息</a></li>            <li><a href="#">企业信息</a></li>        </ul>    </li></ul></body></html>

阅读全文

0 0