css元素hover時控制另一个元素的显示隐藏

最新推荐文章于 2024-09-01 13:57:04 发布

Williamoses

最新推荐文章于 2024-09-01 13:57:04 发布

阅读量1.2w

点赞数 8

分类专栏： CSS3

本文链接：https://blog.csdn.net/moses_binson/article/details/83377250

版权

CSS3 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css元素hover時控制另一个元素的显示隐藏</title>
    <style type="text/css">
        .head li{
            width: 100px;
            text-align: center;
            background-color: lightgray;
            margin-left: 5px;
            float: left;
            list-style: none;
        }
        .head li ul{
            display: none;//元素先默认是隐藏的
        }
        .head li:hover ul{
            display: block;//hover之后状态改变
        }
    </style>
</head>
<body>
    <div>
        <ul class="head">
            <li>首页
                <ul>
                    <li>margin</li>
                    <li>float</li>
                    <li>padding</li>
                </ul>
            </li>
            <li>关于我们
                <ul>
                    <li>margin</li>
                    <li>float</li>
                    <li>padding</li>
                </ul>
            </li>
            <li>联系我们
                <ul>
                    <li>margin</li>
                    <li>float</li>
                    <li>padding</li>
                </ul>
            </li>
            <li>企业建设
                <ul>
                    <li>margin</li>
                    <li>float</li>
                    <li>padding</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>