Question

更新：通过更新到最新的fancybox css来解决此问题。

我正在使用缩略图构建一个投资组合网站，该缩略图使用css转换/转换在悬停时放大。问题是，当我查看弹出窗口时，如果我移动鼠标，弹出图像会在页面上闪烁/跳跃。这是链接的相关css：

.thumb a {
-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;
display: block;
}
.thumb a:hover {
-webkit-transform:scale(1.125, 1.125);  
-moz-transform:scale(1.125, 1.125);
-o-transform:scale(1.125, 1.125);
-ms-transform:scale(1.125, 1.125);
transform:scale(1.125, 1.125);
z-index: 999;
overflow: visible;
}

如果我只是从.thumb中删除“display：block”一个样式，Fancybox工作正常，但我的变换根本不起作用。或者如果我离开“display：block”但是从.thumb a样式中移除所有转换规则，Fancybox工作正常，缩略图缩放，但没有平滑过渡。有没有办法解决冲突，所以我可以有一个稳定的Fancybox弹出窗口以及平滑的缩略图转换？

Answer 1

除非您将“thumb”类添加到body或html元素，否则不应影响fancyBox。

我做了一个快速测试，以确保它工作正常。

使用css转换显示链接时，Fancybox会出现问题

1 个答案: