前端入门css学习笔记（十六）-----隐藏属性

最新推荐文章于 2024-03-27 20:02:52 发布

小不言啊

最新推荐文章于 2024-03-27 20:02:52 发布

阅读量223

点赞数 1

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/m0_61656944/article/details/122479863

版权

如果想要做到鼠标移动到内容时再显示出来，可以利用元素转换实现。

首先，元素隐藏可以使用display：none;来实现隐藏元素。

 <style>
        /* 把ul列表隐藏 */
        .hide{
            display: none;
        }
        /* 通过元素转换把隐藏列表显示出来 */
        .box:hover ul{
            display: block;

        }
        .box{
            background: #888;
        }
    </style>

</head>
<body>
   
    <div class="box">
        军事
        <ul class="hide">
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>

实现效果很简单：

把需要隐藏的标签先隐藏起来。
通过元素转换把在哪个元素上需要展示的标签转换过来即可。

小不言啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门css学习笔记（十六）-----隐藏属性

如果想要做到鼠标移动到内容时再显示出来，可以利用元素转换实现。首先，元素隐藏可以使用display：none;来实现隐藏元素。 <style> /* 把ul列表隐藏 */ .hide{ display: none; } /* 通过元素转换把隐藏列表显示出来 */ .box:hover ul{ display: block; } ..
复制链接

扫一扫