html - 有什么方法可以隐藏 div 的内容而不是 div 本身？

Question

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

<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，因为我是个贪吃的人。*

Answer 1

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

#box > img {
  display: none;
}

#box:hover > img {
  display: block;
}