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;
}

Answer 2

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

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

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