我想要实现一个非常简单的功能：在鼠标悬停时改变表格行的透明度。
不幸的是，它并不十分有效，因为如果我快速地在悬停和离开之间切换，有时透明度变化太慢，看起来颜色会闪烁。当我缓慢地悬停和离开时，这种闪烁就不会发生。
我制作了一个示例，让您知道我的意思：
这种行为是浏览器的bug还是我的代码有问题？有没有办法修复它？我已经尝试使用Jquery脚本来代替CSS中的透明度变化，但结果是一样的 :/
6个回答
23
哈，这几乎是 Webkit 有时候会出现的同样问题。所以，我尝试模拟了 Webkit 的解决方法（使用 -webkit-transform: translateZ(0)），但是使用了 2D 变换，它奏效了！
因此，似乎只需为受到闪烁影响的元素添加 -moz-transform: rotate(0); 就可以解决问题：http://jsfiddle.net/kizu/yfhTW/4/
- kizu
5
哇！它真的似乎有效。你太厉害了！ :) 然而，我想知道为什么这样做能起作用，但是非常感谢！ - r0skar
1看起来现代浏览器对受CSS3变换影响的块应用了稍微不同的渲染/回流规则。因此，当出现问题时，这只是另一种尝试的方法。就像对于IE来说，
zoom:1一样 :) - kizu很好知道。我打算保存那个代码片段，这样当我再次遇到一些CSS3效果的问题时，就可以尝试它了。我认为我自己永远不可能得到这个解决方案 - 所以再次感谢 :) - r0skar
但要注意与https://dev59.com/52gv5IYBdhLWcg3wJNdF#10814448相关的不良行为。 - Beat
谢谢！这次没有为我解决问题，但是https://dev59.com/62kw5IYBdhLWcg3wGWtk可以帮到我。 - christopher.theagen
5
尝试将 border: 1px solid transparent; 添加到元素中（而不是:hover伪类）。这对我起作用了。
- Bartłomiej Semańczyk
1
这适用于具有不透明度的图像，例如图像包含阴影效果。 - soulglider
3
如果您在此处使用的图像不透明度不为1且存在类似闪烁的问题，请确保在图像上设置background-color:white;！我知道这并没有解决当前的问题，但它是一个类似的问题。
.post img { opacity:.8; background-color:white; }
.post:hover img { opacity:1; }
- Jacob Raccuia
2
如果受影响的元素已经被翻译（因此，kizu 的修复方法不适用），请确保设置 -webkit-backface-visibility：
最初的回答来自 kizu：
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
- Max
1
这个对我来说解决了问题！奇怪的是，我只在某些显示器上注意到了这个问题。 - tyirvine
2
这个方法对我无效，所以我想提一下我的做法。我不得不在所有周围的元素中添加 overflow:hidden。
- Wilhelm
0
在尝试了上述建议之后，为应用悬停效果的项目添加z-index属性解决了我的问题。
- Colton Neifert
1
你能否发布一个分叉的fiddle或代码块来改进你的答案。 - pmkro
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<td>的默认display：table-cell相关。当我更改为display：block时，问题消失了，但当然表格布局出现了问题。由于您的不透明度更改仅会更改颜色，因此是否可以改用:hover上的颜色更改来实现它？ - Pat