我正在尝试实现一个非常简单的事情:在悬停时更改表格行的不透明度。
不幸的是,它不能很好地工作,因为如果我非常快速地进出,有时不透明度变化太慢并且看起来颜色是闪烁的。当我徘徊进出有点慢时,这种闪烁不会发生。
我做了一个例子让你知道我的意思:
此行为是浏览器错误还是我的代码有问题?它可以以某种方式修复吗?我试图使用Jquery脚本而不是通过CSS进行不透明度更改,但结果是相同的:/
答案 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;