Question

我正在尝试hover图像并放大图像和图像信息。我想将悬停的图片div放在其他图片div之上，而不是被其他图片覆盖div 我使用z-index但它似乎不起作用。任何人都有良好的想法？非常感谢。

<div class='imgDiv'>
    <img src='a.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='b.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='c.jpg' />
    <p>hahaha</p>
</div>

<div class='imgDiv'>
    <img src='d.jpg' />
    <p>hahaha</p>
</div>

......
.....I have so many images divs....

CSS

.imgDiv{
float:left;
}

.imgDiv:hover{

//part of the enlarge div will be covered by other image divs...
-webkit-transform:scale(1.45, 1.45);
-moz-transform:scale(1.45, 1.45);
-o-transform:scale(1.45, 1.45);
-ms-transform:scale(1.45, 1.45);
transform:scale(1.45, 1.45)


}

Jquery的

$('.imgDiv').hover(function(){

  //not working...
  $(this).css('z-index','999');       

})

Answer 1

要使z-index生效，position必须为absolute。您可能需要在悬停时切换绝对定位，并设置top和left属性，以便div保持不变。

如果你的div没有漂浮会更容易。

请记住，绝对位置是相对于第一个定位元素。不一定是身体元素。它相对于第一个父项position设置为某个东西。

修改
正如@ahren在他的评论中指出的那样，z-index仅与position: absolute;合作我错了。

那就是说，我用你的代码设置了一个fiddle，除了javascript部分，它似乎按预期工作。 chrome / firefox / ie9的行为相同。也许你的html / css的其他部分导致了这个问题？或者我误解了这个问题？

如何将悬停图像放在其他元素之上

1 个答案: