有啥方法可以隐藏 div 的内容而不是 div 本身？

Posted 2023-03-06

【中文标题】有啥方法可以隐藏 div 的内容而不是 div 本身？

【英文标题】：Is there any way to hide a div's contents but not the div itself?有什么方法可以隐藏 div 的内容而不是 div 本身？

【发布时间】：2013-07-16 14:32:48

【问题描述】：

这就是我希望以最简化的形式做的事情。我想在页面上出现一个框，当你将鼠标悬停在它上面时，它的内容是可见的，否则它们是隐藏的。例如，假设我们有这个：

<style type="text/css">
#box 
    background-color:red;
    width:100px;
    height:100px;

</style>

<div id="box">
    <img src="smileyface.png" />
</div>

大多数时候，图像是隐藏的，看起来像一个红色框，但是当 div 悬停在图像上时，图像就会出现。有没有办法用 CSS 而不是 javascript 来做到这一点。我知道使用 javascript 我们可以删除元素并将其添加回来，但我只想显示并隐藏它。想法？

*必须符合 IE 8，因为我很喜欢惩罚。*

【问题讨论】：

为什么你的 CSS 在脚本块中？

@j08691 是对的。你应该把你的 CSS 放在

@j08691 哎呀！我从不使用内联 CSS，所以我只是在那里很愚蠢。

【参考方案1】：

这很容易。只需在#box 悬停时更改图像的显示属性

#box > img 
  display: none;


#box:hover > img 
  display: block;

【讨论】：

很酷，但是让我们假设 div 中不仅仅是一个图像。如果有标题、段落和图像怎么办？

用visibility:hidden不是更合适吗？在这里，以便保留空间？

要么为它们每个设置一个规则，要么将它们放在一个包装器 div 中。

@StefanSurkamp 这也是可能的，但我没有在这种情况下展示这一点，因为他已经将#box 定义为具有固定大小。

【参考方案2】：

你可以在任何你想要的标签上使用 :hover：

#box 
    background-color:red;
    width:100px;
    height:100px;


#box:hover 
    background-image: src('smileyface.png');

【讨论】：

PS：IE 从版本 7 开始正确解释伪类（如 :hover）。