jquery - 使用 jQuery 操作图像 z-index

Question

我有一排 160x160px float 图像，浏览器将其大小调整为 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/