带有 CSS3 和 javascript z 轴问题的缩略图悬停缩放（放大）

Question

我正在尝试构建一系列在悬停时放大的缩略图。我的初步构建通过使用 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');
    });
});

所以这个页面使用这个脚本来切换将 div 的比例增加到 150% 的 hover_effect 类。

解决方案：z-index:999

还有关于在没有 setTimeOut 的情况下延迟初始 mouseenter 的任何想法吗？

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

附言此演示使用修改后的砌体图像库版本。

谢谢。

Answer 1

未经测试：

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