Question

我想更改我绝对定位在body元素中的一组照片中的图像的z-index。我想这样，当我滚动图像时，它使用CSS中的web-kit变换增加了大小。

问题是图像顶部的HTML文件堆栈中的图像排列较高。我希望有一个脚本可以增加文件的z-index，这样当我滚动它时它不会出现在相邻照片的后面。

我花了一些时间来寻找z-index个添加文件，因为在我的脑海中你只是用jquery文件逐步增加z-index到无穷大但我不知道如何编码。

基本上我想要一组彼此靠近的照片在尺寸增大时彼此不重叠。

这可行吗？

Answer 1

使用CSS：

.photo_group .photo:hover {
    z-index: 1000; /* May depend on over indices defined! */
}

如果您需要准确的CSS ruls /类名，请发布一些HTML。这只是一个样本。

Answer 2

喜欢这个？：

  <style>
  img{
      position:absolute;
  }
  img.apple{
      top: 40px;
      left: 0px;
  }
  img.ipod{
      top: 50px;
      left: 50px;
  }
  img.thanks{
      top: 0px;
      left: 0px;
  }
</style>


<script type="text/javascript">
function increaseZIndex(obj){
    obj.style.zIndex = 1;
}
function decreaseZIndex(obj){
    obj.style.zIndex = 0;
}
</script>
<img src='http://images.apple.com/home/images/billboard_25b_thankyou_headline_Yr4p8DedLk7y.png' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='thankyou'/>
<img src='http://edibleapple.com/wp-content/uploads/2009/04/silver-apple-logo.png' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='apple'/>
<img src='http://www.ipod.org.uk/ipod_nano.jpg' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='ipod' />

See it in action on JSFiddle

如何动态更改照片的z-index？

2 个答案: