悬停+闪烁时的CSS +不透明度变化答案

【问题标题】：CSS + Opacity change on Hover + Flickering悬停+闪烁时的CSS +不透明度变化
【发布时间】：2011-11-26 19:25:00
【问题描述】：

我正在尝试实现一个非常简单的事情：在悬停时更改表格行的不透明度。

不幸的是，它的效果不是很好，因为如果我快速进出鼠标，有时不透明度变化太慢，颜色似乎在闪烁。当我盘旋进出有点慢时，这种闪烁不会发生。

我举了一个例子，所以你知道我的意思：

这种行为是浏览器错误还是我的代码有问题？它可以以某种方式修复吗？我尝试使用 Jquery 脚本而不是通过 CSS 进行不透明度更改，但结果是相同的：/

【问题讨论】：

问题似乎是特定于 Firefox 的。我刚刚将我的 Chrome 更新到最新版本，那里的闪烁消失了。但是在 Firefox 6.0.2 中它仍然存在。我什至没有看 IE，因为它有一些不透明的问题。
附注您是否也看到了 Firefox 6.0.2 的闪烁，或者它可能只是我的配置的问题，而我是唯一看到闪烁的人？
我在 Firefox 6.0.2 中看到了相同的行为。它似乎与<td> 具有的默认display: table-cell 有关。当我更改为display: block 时，问题就消失了，但是表格布局当然是搞砸了。由于您的不透明度更改只是更改颜色，您可以在 :hover 上更改颜色吗？
嗨帕特，您的意思是改变文本颜色和背景颜色以达到几乎相同的结果吗？我想我能做到。好主意！但它看起来与改变不透明度相同，或者？如果我找不到其他工作，我可能会继续这样做。谢谢！

【解决方案1】：

哈，这几乎是 webkit 有时遇到的问题。所以，我尝试模拟 webkit 的修复（带有-webkit-transform: translateZ(0) 的那个），但是使用了 2D 变换，它成功了！

因此，似乎只需将-moz-transform: rotate(0); 添加到受闪烁影响的元素即可解决问题：http://jsfiddle.net/kizu/yfhTW/4/

【讨论】：

【解决方案2】：

这对我不起作用，所以我想我会提到什么。我不得不添加溢出：隐藏到所有周围的元素。

【讨论】：

【解决方案3】：

尝试将border: 1px solid transparent; 添加到元素（而不是:hover 伪类）。它对我有用。

【讨论】：

【解决方案4】：

对于来这里的人，如果图像的不透明度不是 1，并且有类似的闪烁，请确保在图像上设置 background-color:white;！我知道这并不能解决手头的问题，但这是一个类似的问题。

.post img { opacity:.8; background-color:white; }
.post:hover img { opacity:1; }

【讨论】：

【解决方案5】：

在尝试了上述建议后，向应用悬停效果的项目添加 z-index 解决了我的问题。

【讨论】：

【解决方案6】：

如果受影响的元素已被翻译（因此，fix by kizu 不适用）请确保设置-webkit-backface-visiblity：

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;

【讨论】：