CSS 显示或隐藏子元素

最新推荐文章于 2023-04-14 17:05:16 发布

第八个猴子

最新推荐文章于 2023-04-14 17:05:16 发布

阅读量504

点赞数

版权

很多时候我们仅仅只是想让鼠标移动入某个元素，然后显示出某个元素。

大多数博客的标题或内容都是：使用CSS实现鼠标悬停在一行上，显示某些元素

很遗憾，这是错误的，鼠标悬停后，尽管CSS标准中有定义此种方式以显示出某些元素，但是：

这只能显示出子元素。

例子：

HTML端：

<div class="test">
    <span>鼠标移入显示</span>
</div>


<div class="dome">
    <span>显示</span>
</div>

CSS定义：

.dome{
  display:none;  
}

/* 按照其余博客内容所示代码 */
.test:hover .dome{
  display:block;
}

此刻，所需效果并没有被完成，DIV.dome 并不能如期显示（实践，这里不提供GIF进行效果测试）。

为什么呢？因为此标准仅仅只能对子元素生效。

如何修改？如下，仅需修改HTML即可：

<div class="test">
    <span>鼠标移入显示</span>
    <div class="dome">
        <span>显示</span>
    </div>
</div>

当 DIV.dome 成为子元素，效果与所想一致，鼠标移入显示。

OneNote笔记如下：

以上。

转载需注明来处：我的博客园

转载于:https://www.cnblogs.com/chongsaid/p/chongsaid-css-display.html

关注