0

我正在尝试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');       

})
4

1 回答 1

1

为了z-index工作，position必须是absolute. 您可能必须在悬停时切换绝对定位，并设置top和left属性以使 div 保持原位。

如果你没有让你的 div 浮动，它会更容易。

请记住，绝对位置是相对于第一个定位元素的。不一定是body元素。它相对于第一个将其position设置为某物的父级。

编辑
正如@ahren 在他的评论中指出的那样，我z-index只使用position: absolute;.

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

于 2012-08-08T02:17:38.667 回答