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

有没有办法隐藏div的内容而不是div本身？

2 个答案: