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

时间:2012-03-04 11:59:58

标签: jquery html css z-index

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

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

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

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

这可行吗?

2 个答案:

答案 0 :(得分:2)

使用CSS:

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

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

答案 1 :(得分:0)

喜欢这个?:

  <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