用jQuery操纵图像z-index

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/