Question

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

我试图将z-index 0放在主div上，而z-index 1000放在隐藏的div上，但仍无法正常工作。

我怎样才能改变这一点，以及我做错了什么？

感谢。

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也可能有用。

悬停时重叠图像

1 个答案: