在 :hover 上更改不透明度时，Img 会移动

Posted 2023-03-06

【中文标题】在 :hover 上更改不透明度时，Img 会移动

【英文标题】：Img moves when changing opacity on :hover

【发布时间】：2014-10-25 00:30:21

【问题描述】：

所以我有一个 div，里面有一个图像，我想从 0.7 不透明度开始并在悬停时更改为 1，但我遇到了一个明显的错误，图像要么移动 1px，要么变小 1px（我不能确定哪个）当我更改悬停时的不透明度时。 这显然是一个已知的错误，但其他问题中的修复都没有对我有用。 我试过设置 backface-visibility: hidden;并进行转换，但错误仍然存​​在。

对于这个错误有什么新的解决方案吗？

.collapse img  
    width: 100%;
    margin-top: -90px; 
    margin-left: 75px;
    opacity: 0.7; 
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    border:none;
 
.collapse:hover img 
    width: 100%; 
    opacity: 1;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0); 
    border:none;

谢谢， 亚当

编辑 - JS 小提琴 - http://jsfiddle.net/wfe70gd1/6/

可以在此处查看实时示例（图表下方的右列）--http://mmdoc.ajhtestserver.com/decks/1/

而且它似乎只发生在 Firefox 中

【问题讨论】：

我已经看到这种情况发生了几次，您是否尝试过确保您的图像是浮动的？或者，如果您没有指定图像尺寸，也可以尝试。一些代码可能会帮助我们

演示“错误”所需的 JSfiddle 会有所帮助。

使用 firefox 的小提琴和网站按预期工作：/ 您使用的是哪个浏览器？

我使用的是 Firefox 31。这种效果很微妙。不透明度变化很好，但是如果您看到元素的右侧在悬停时会缩小和扩大，从而产生小的反弹效果。

我可以使用 Firefox 33.0a2 (2014-08-31) 看到它 - 但对我来说重现起来很棘手，因为它不会始终如一地发生。不过，如果我快速将鼠标悬停在两张图片上，这种情况似乎会更频繁地发生。

【参考方案1】：

您想将背面可见性选择器添加到您的父类 (.collapse)。您还需要包含选择器的 Mozilla 版本。包含 Opera 也无妨。

-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

【讨论】：

我认为这行得通。我之前尝试过背面技巧，但也许我没有尝试使用前缀。无论如何，非常感谢。

如果这对您有用，请接受我的回答。谢谢！

第一行之前不应该有-：