带有 CSS3 和 javascript z 轴问题的缩略图悬停缩放(放大)
时间：2023-11-29问题描述
我正在尝试构建一系列在悬停时放大的缩略图.我的初步构建通过使用 CSS3 transform:scale 和 ease-in-out 来完成放大/缩放部分.问题是它们彼此重叠，因为它们共享一个 z 轴.
任何人都可以帮助我在此场景中创建一个 javascript 添加，以正确地将每个缩略图定位在有意义的 z 轴上，即每个放大的图像都调整大小以位于其他图像的顶部.
在我的网站上进行演示: demo 更新:已解决
代码预览:
html:
css:
#main div.hover {位置:相对；z-指数:200；显示:块；-webkit-transition:所有 0.2s 缓入出局；-moz-transition:所有 0.2s 缓入出局；-o-transition:所有 0.2s 缓入缓出；-ms-transition:所有 0.2s 缓入缓出；过渡:所有 0.2s 缓入缓出；背景颜色:#297ab1;}#main div.hover:hover, #main div.hover_effect {-webkit-transform:scale(1.5, 1.5);-moz 变换:比例(1.5，1.5)；-o-transform:scale(1.5, 1.5);-ms-transform:scale(1.5, 1.5);变换:规模(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 的任何想法吗?
非常感谢任何建议和解决方案！
附言此演示使用修改后的砌体图像库版本.
谢谢.
解决方案 未经测试:
#main div.hover:hover, #main div.hover_effect {z 指数:999}
Im attempting to build a series of thumbnails that enlarge on hover. My preliminary build accomplishes the enlarge/zoom part by using CSS3 transform:scale and ease-in-out. The problem is that they overlap each other because they share a single z-axis.
Can anyone assist me in creating a javascript addition to this scenario that correctly positions each thumbnail in a z-axis that makes sense, i.e. each enlarged image resizes to be on top of each other image.
Demonstration on my website here: demo Updated: Solved
Preview of code:
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);}
script:
$(document).ready(function() {
$('.hover').bind('touchstart touchend', function(e) {
e.preventDefault();
$(this).toggleClass('hover_effect');
});
});
So this page uses this script to toggle the hover_effect class that increases the div's scale to 150%.
Solution: z-index:999
Also any ideas about putting a delay in the initial mouseenter without a setTimeOut?
Any suggestions and solutions are most appreciated!
p.s. This demo uses a modified version of masonry image gallery.
Thanks.
解决方案 Untested:
#main div.hover:hover, #main div.hover_effect {
z-index: 999
}
这篇关于带有 CSS3 和 javascript z 轴问题的缩略图悬停缩放(放大)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }