html - 如何在鼠标悬停在所有内容之上时将图像设置为 div？

Question

我正在做一些 CSS 的东西，

现在我有一个更 slim 的 div 标签。

<div class="myDivClass">
<img src="some image url">
<h2>Title</h2>
</div>

现在我需要将悬停添加到该 div 类。我需要做的是当鼠标悬停时，另一张图片应该出现在该图片之上，

即。

但它们都应该显示，关闭图像应该只在鼠标悬停时出现。

CSS:

.myDivClass:hover{

  content:url(closed image url);

}

提前致谢...!

Answer 1

您需要通过使 div 本身相对定位来在 div 中定位您的图像。

演示:http://jsfiddle.net/abhitalks/9GBUF/

HTML:

<div class="myDivClass">
    <img class="baseimg" src="...">
    <img class="overlay" src="...">
    
<h2>Title</h2>

</div>

CSS:

div.myDivClass {
    position: relative;
    width: 128px;
}
div.myDivClass img.overlay {
    position: absolute;
    top: 12%;
    left: 0px;
    display: none;
}
div.myDivClass:hover img.overlay {
    display: block;
}

---

更新:(在 Op 的编辑之后)

如果你想用伪元素来做，那么你也需要定位它。

演示 2:http://jsfiddle.net/abhitalks/Z93t7/1/

HTML:

<div class="myDivClass">
    <img class="baseimg" src="...">
<h2>Title</h2>

</div>

CSS:

div.myDivClass {
    position: relative;
    width: 128px;
}

div.myDivClass::before {
    content: url(...);
    position: absolute;
    top: 12%; left: 0px;
    display: none;
}

div.myDivClass:hover::before {
    display: block;
}