[英]Thumbnail hover zoom (enlarge) w/CSS3 and javascript z-axis problem
我正在尝试构建一系列在 hover 上放大的缩略图。 我的初步构建通过使用 CSS3 transform:scale 和 ease-in-out 来完成放大/缩放部分。 问题是它们彼此重叠,因为它们共享一个 z 轴。
任何人都可以帮助我创建一个 javascript 除了这个场景,它可以正确地将每个缩略图定位在有意义的 z 轴上,即每个放大的图像都调整大小以位于另一个图像的顶部。
在我的网站上进行演示:演示更新:已解决
代码预览:
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 class 将 div 的比例增加到 150%。
解决方案: z-index:999
还有关于在没有 setTimeOut 的情况下延迟初始 mouseenter 的任何想法吗?
任何建议和解决方案都非常感谢!
ps 这个演示使用了砌体图像库的修改版本。
谢谢。
未经测试:
#main div.hover:hover, #main div.hover_effect {
z-index: 999
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.