Question

我有一排160x160px浮动图像被浏览器调整为100x100px。

在悬停时，操纵通常大小和边距的图像以使它们保持在同一位置。

我接下来想要实现的是将放大的图像移动到前面，然后在悬停事件后再移回。我试图通过添加和删除z-index为100的类来实现这一点。

HTML是：

    <div id="content_top">
        <img class="thumbnail" src="images/thumbs/thumb1.jpg" width="100"  height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb2.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb3.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb4.jpg" width="100" height="100" border="0" alt=""/>
        <img class="thumbnail" src="images/thumbs/thumb5.jpg" width="100" height="100" border="0" alt=""/>
    </div>

使用CSS：

#content_top {
      height: 210px;
}

#content_top img{
      float:left;
      padding: 0 0 0 10px;
    }

    .ontop {
      z-index: 100;
    }

我正在使用的jQuery是：

$('#content_top img').hover(function(){
    $(this).filter(':not(:animated)').animate({
        'width' : '160px',
        'height' : '160px',
        'marginLeft' : '-30px',
        'marginRight' : '-30px',
        'marginBottom' : '-30px'
        }, 'fast', 'linear'
    ).addClass('ontop');
}, function(){
    $(this).animate({
        'width' : '100px',
        'height' : '100px',
        'marginLeft' : '0px',
        'marginRight' : '0px',
        'marginBottom' : '0px'
    }, 'fast', 'linear'
    ).removeClass('ontop');
});

除z-index部分外，一切正常。我已经测试了这个类正在被添加，它是。尝试了各种定位图像的方法，甚至将它们包装在容器div中并改变它们的z-index。

我错过了什么？

感谢。

Answer 1

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

试试这个......

#content_top img{
    position:relative;
    z-index:1;
    float:left;
    padding: 0 0 0 10px;
}

#content_top img.ontop {
    z-index: 2;
}

这是一个有效的解决方案：http://jsfiddle.net/Wgy3E/1/

Answer 2

z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。 [w3schools]

Answer 3

在img工作中定义较低的z-index？否则尝试使用jquery .setStyle（{z-index：''}）;更低的值而不是删除类。

用jQuery操纵图像z-index

3 个答案: