javascript - 缩略图悬停缩放(放大)，带有CSS3和JavaScript Z轴问题

我正在尝试构建一系列在悬停时会放大的缩略图。我的初步构建通过使用CSS3 transform:scale和ease-in-out完成了放大/缩放部分。问题在于它们彼此重叠，因为它们共享一个z轴。

谁能协助我为这种情况创建一个javascript附加功能，以将每个缩略图正确地定位在有意义的z轴上，即，每个放大图像的大小都调整为彼此重叠。

在我的网站上的此处演示: demo更新:解决了

代码预览:

html:

<div style="position: absolute;" class="item hover">
 <a href="#"><img alt="two" src="img/posts.png"></a>
</div>

CSS:

#main div.hover {
position: relative;
z-index:200;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #297ab1;}

#main div.hover:hover, #main div.hover_effect {
-webkit-transform:scale(1.5, 1.5);
-moz-transform:scale(1.5, 1.5);
-o-transform:scale(1.5, 1.5);
-ms-transform:scale(1.5, 1.5);
transform:scale(1.5, 1.5);}

脚本:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

因此，此页面使用此脚本切换hover_effect类，该类将div的比例增加到150％。

解决方案:z-index:999
还有关于在没有setTimeOut的情况下延迟初始mouseenter的想法吗？

任何建议和解决方案都非常感谢!

p.s.该演示使用了砌体图片库的修改版本。

谢谢。

最佳答案

未经测试:

#main div.hover:hover, #main div.hover_effect {
    z-index: 999
}

关于javascript - 缩略图悬停缩放(放大)，带有CSS3和JavaScript Z轴问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7085879/