css - 在悬停时重叠图像

Question

我想在照片悬停时显示隐藏的 div，问题是隐藏的 div 有背景色，而当我悬停一些照片时，背景仍然隐藏。

我尝试将 z-index 0 放在主 div 上，将 z-index 1000 放在隐藏的 div 上，但仍然不起作用。

我怎样才能改变它，我做错了什么？

http://jsfiddle.net/r7zhn50L/

谢谢。

HTML:

<div class="photos">
<div class="a-img">
<img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
<div class="a-hover">sdfsdf</div>
</div>

<div class="a-img">
<img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
<div class="a-hover">sdfsdf</div>
</div>

<div class="a-img">
<img src="http://www.jamsadr.com/files/Professional/1fb60f23-00d5-4c43-a552-63321c9ed969/Presentation/HighResPhoto/Person-Donald-900x1080.jpg" width="180" height="250" />
<div class="a-hover">sdfsdf</div>
</div>
</div>

CSS

.photos .a-img{
float:left;
margin-left:10px;
z-index:0;
}

.photos .a-hover{
width:180px;
height:250px;
background-color:red;
margin-top:-250px;
display:none;
z-index:1000;
}

.photos .a-img:hover .a-hover{
display:block;
}

Answer 1

z-index 属性 only applies to positioned elements.

您可以将 position: relative 添加到元素中。 (updated example)

.photos .a-hover {
    z-index: 2;
    position: relative;
}

此外，您还需要消除因内联 img 元素的基线对齐而产生的间隙。 This answer是相关的。

---

您当前使用的方法仅适用于具有固定尺寸的元素。我建议使用一种适用于动态变化维度的方法:(example)

.photos .a-img {
    float: left;
    margin-left: 10px;
    position: relative;
}
.photos .a-hover {
    background-color: #f00;
    display: none;
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
}
.photos .a-img:hover .a-hover {
    display: block;
}

This answer实际上也可能有帮助。