如何将图像设置为鼠标上方的div？
如何将图像设置为鼠标上方的div？
提问于 2014-05-26 11:01:31
我在做一些css的事情，
现在我有个div标签更脏。
<div class="myDivClass">
<img src="some image url">
<h2>Title</h2>
</div>现在我需要将悬浮添加到div类中。我需要做的是，当鼠标移动到另一个图像上时，
即。
但是两者都应该显示，封闭的图像应该只出现在鼠标结束时。
CSS：
.myDivClass:hover{
content:url(closed image url);
}感谢高级..！
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-05-26 11:12:32
您需要将图像定位在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;
}Stack Overflow用户
发布于 2014-05-26 11:10:27
div.MyDivClass a:hover {
background-image(closed image url);
}这将对特定的div进行更改。当您为div设置类时，需要在CSS中调用div。您目前使用它的方式是.MyDivClass试图将它称为CssClass，而不是div类。
Stack Overflow用户
发布于 2014-05-26 11:09:12
您可以使用position:absolute;检查演示，看看这是否是您想要的。
对于html，可以使用clase closed添加所需的图像(已关闭的图像)。
Html代码：
<div class="myDivClass">
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" />
<h2>Title</h2>
<img class="closed" src="http://i.stack.imgur.com/JlPAH.jpg" />
</div>对于css，您需要添加:hover，并为您的closed类提供postion:absolute;和display:none;，以便在悬停div之前不会显示。
Css代码：
.myDivClass:hover .closed{display:block;}
.closed {
width:640px;
height:181px;
position:absolute;
top:100px;
display:none;
}演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23868614
复制相关文章
相似问题
腾讯云开发者
