0

更新：此问题已通过更新到最新的 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 a 样式中删除“display:block”，Fancybox 可以正常工作，但是我的转换根本不起作用。或者，如果我离开“display:block”但从 .thumb a 样式中删除所有过渡规则，Fancybox 工作正常，缩略图缩放，但没有平滑过渡。有没有办法解决冲突，所以我可以有一个稳定的 Fancybox 弹出窗口以及平滑的缩略图转换？

4

1 回答 1

1

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

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

于 2012-03-01T17:26:52.540 回答