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

Posted 2023-03-06

【中文标题】悬停+闪烁时的CSS +不透明度变化

【英文标题】：CSS + Opacity change on Hover + Flickering

【发布时间】：2011-11-26 19:25:00

【问题描述】：

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

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

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

http://jsfiddle.net/yfhTW/2/

这种行为是浏览器错误还是我的代码有问题？它可以以某种方式修复吗？我尝试使用 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/

【讨论】：

哇！它似乎确实有效。你太棒了！ :) 但是我想知道，如果 some1 可以解释我为什么会这样，但是非常感谢！

看起来现代浏览器对受 CSS3 转换影响的块应用略有不同的渲染/重排规则。所以，当出现问题时，它只是另一件事。就像 IE 的zoom:1 :)

很高兴知道。我要保存那个 sn-p，所以当我再次遇到一些 css3 效果问题时，我可以尝试一下。我想我自己永远无法解决这个问题 - 所以再次感谢:)

但请注意与***.com/a/10814448/5159481相关的不良行为

谢谢！这次没有为我修好，但***.com/questions/10134935/… 修好了

【参考方案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;

【讨论】：

这为我修好了！这很奇怪，因为我只能在某些显示器上注意到这个问题。