Hover + Flickering上的CSS + Opacity更改

时间:2011-09-28 11:32:17

标签: css hover opacity

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

不幸的是,它不能很好地工作,因为如果我非常快速地进出,有时不透明度变化太慢并且看起来颜色是闪烁的。当我徘徊进出有点慢时,这种闪烁不会发生。

我做了一个例子让你知道我的意思:

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

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

6 个答案:

答案 0 :(得分:22)

哈,这个问题几乎和webkit有时一样。所以,我试图模仿webkit的修复程序(带有-webkit-transform: translateZ(0)的修复程序),但使用2D转换,它可以工作!

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

答案 1 :(得分:5)

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

答案 2 :(得分:3)

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

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

答案 3 :(得分:2)

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

答案 4 :(得分:0)

在尝试上述建议后,在项目中添加z-index,正在应用悬停效果来解决问题。

答案 5 :(得分:0)

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

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