悬停时重叠图像 [英] Overlap the image on hover

问题描述

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

i want to show a hidden div when a photo is hovered, the problem is that the hidden divs got a background color, and when i hover some photo, the background still hidden.

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

I tried to put z-index 0 on the principal div, and z-index 1000 on the hidden div, but still not working.

我改变了，我做错了什么？

How can i change that, and what am i doing wrong?

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

推荐答案

z-index 属性仅适用于已定位的元素。

您可以向元素添加 position：relative 。 （更新示例）

You could add position: relative to the element. (updated example)

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

此外，您需要删除内联 img 元素的基线对齐。 此答案与相关。

Also, you need to remove the gap resulting from the inline img element's baseline alignment. This answer is relevant.

您当前使用的方法仅适用于具有固定尺寸的元素。我建议您使用可适用于动态变化尺寸的方法：（示例）

The approach you are currently using only works for elements with fixed dimensions. I'd suggest using an approach that will work with dynamically varying dimensions: (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 might actually be helpful too.

这篇关于悬停时重叠图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！