如何在鼠标悬停在一切之上将图像设置为div？

Question

我正在做一些CSS的事情，

现在我的div标签比较纤薄。

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

现在我需要将hover添加到该div类。我需要做的是当鼠标过度发生时另一个图像应该出现在该图像的顶部，

即。

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

CSS：

.myDivClass:hover{

  content:url(closed image url);

}

先谢谢了！！

Answer 1

div.MyDivClass a:hover {
   background-image(closed image url);
}

这将为特定div更改它。 为div设置类时，需要在CSS中调用div。 你当前使用它的方式.MyDivClass试图把它称为CssClass，而不是div类。

Answer 2

您需要将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;
}

Answer 3

您可以使用position:absolute;检查 DEMO ，看看这是否是您想要的。

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

<强> DEMO

Answer 4

更正hover

的css代码

div.myDivClass:hover
{
background-image:url(closed image url);
}

content:url(closed image url);，您需要将content替换为background-image。

Answer 5

我的决定

<强> HTML

<a class="demo" href="#">
<img class="raz" src="http://myubuntu.ru/images/12/mac-rename-title.jpg" />
<img class="dva" src="http://myubuntu.ru/cache/multithumb_thumbs/b_675_675_16777215_10_images_12_mac-scrollbars.jpg" />
</a>

<强> CSS

.demo { 
    position:relative; 
    margin:0 auto; 
    height: 400px;
    width:400px;
    display: block;
}

  .demo img { 
    left: 0; 
    position:absolute; 
    top: 0; 
}

  .demo img.raz {opacity:0;filter:alpha(opacity=0);}
  .demo:hover img.raz {opacity:1;filter:alpha(opacity=100);}
  .demo:hover img.dva, .demo img.dva:hover {opacity:0;filter:alpha(opacity=0);}

live demo

Answer 6

.imgBox {width：191px;身高：191px; background：url（http://www.corelangs.com/css/box/img/duck.png）no-repeat; } .imgBox：hover {width：191px;身高：191px; background：url（http://www.corelangs.com/css/box/img/peng.png）no-repeat; } - 请参阅：http://www.corelangs.com/css/box/hover.html#sthash.6X5XZ7k5.dpuf