I am trying to achieve a very simple thing: change opacity of a table row on hover.
我试图实现一个非常简单的事情：在悬停时更改表格行的不透明度。
Unfortunately, it doesn't work very good, because if I hover in and out very fast, sometimes the opacity change is too slow and it seems like the colors are flickering. This flickering doesn't happen when I hover in and out kinda slow.
不幸的是，它不能很好地工作，因为如果我进出非常快，有时不透明度变化太慢，似乎颜色闪烁。当我徘徊进出有点慢时，这种闪烁不会发生。
I made an example so you know what I mean:
我做了一个例子让你知道我的意思：
http://jsfiddle.net/yfhTW/2/
Is this behavior a browser bug or is something wrong with my code? And can it be fixed somehow? I have tried to use a Jquery script instead of doing the opacity change via CSS, but the results are the same :/
这种行为是浏览器错误还是我的代码有问题？它可以以某种方式修复吗？我试图使用Jquery脚本而不是通过CSS进行不透明度更改，但结果是相同的：/
5 个解决方案
#1
22
Ha, it's almost the same problem the webkit sometimes have. So, I've tried to emulate the fix for webkit (the one with -webkit-transform: translateZ(0)), but using the 2D transform, and it worked!
哈，这个问题几乎和webkit有时一样。所以，我试图模仿webkit的修复程序（使用-webkit-transform：translateZ（0）），但使用2D转换，它工作了！
So, it seems like just adding -moz-transform: rotate(0); to the elements that are affected by flickering solves the problem: http://jsfiddle.net/kizu/yfhTW/4/
所以，似乎只需添加-moz-transform：rotate（0）;对受闪烁影响的元素解决问题：http：//jsfiddle.net/kizu/yfhTW/4/
#2
5
Try to add the border: 1px solid transparent; to the element (not to :hover pseudoclass). It worked for me.
尝试添加边框：1px实心透明;到元素（不是：悬停伪类）。它对我有用。
#3
3
For people coming here who have an image with an opacity that isn't 1, and have a similar flicker, make sure you set background-color:white; on the image! I know this doesn't resolve the question at hand but it is a similar problem.
对于来到这里的人，他们的图像的不透明度不是1，并且具有类似的闪烁，请确保设置背景颜色：白色;在图像上！我知道这并不能解决手头的问题，但这是一个类似的问题。
.post img { opacity:.8; background-color:white; }
.post:hover img { opacity:1; }
#4
2
This did not work for me and so I thought I would mention what did. I had to add overflow:hidden to all of the surrounding elements.
这对我不起作用，所以我想我会提到它做了什么。我不得不添加溢出：隐藏到所有周围的元素。
#5
0
After trying the above suggestons, adding a z-index to the item the hover effect was being applied to solved the problem for me.
在尝试上述建议后，在项目中添加z-index，正在应用悬停效果来解决问题。
#1
22
Ha, it's almost the same problem the webkit sometimes have. So, I've tried to emulate the fix for webkit (the one with -webkit-transform: translateZ(0)), but using the 2D transform, and it worked!
哈，这个问题几乎和webkit有时一样。所以，我试图模仿webkit的修复程序（使用-webkit-transform：translateZ（0）），但使用2D转换，它工作了！
So, it seems like just adding -moz-transform: rotate(0); to the elements that are affected by flickering solves the problem: http://jsfiddle.net/kizu/yfhTW/4/
所以，似乎只需添加-moz-transform：rotate（0）;对受闪烁影响的元素解决问题：http：//jsfiddle.net/kizu/yfhTW/4/
#2
5
Try to add the border: 1px solid transparent; to the element (not to :hover pseudoclass). It worked for me.
尝试添加边框：1px实心透明;到元素（不是：悬停伪类）。它对我有用。
#3
3
For people coming here who have an image with an opacity that isn't 1, and have a similar flicker, make sure you set background-color:white; on the image! I know this doesn't resolve the question at hand but it is a similar problem.
对于来到这里的人，他们的图像的不透明度不是1，并且具有类似的闪烁，请确保设置背景颜色：白色;在图像上！我知道这并不能解决手头的问题，但这是一个类似的问题。
.post img { opacity:.8; background-color:white; }
.post:hover img { opacity:1; }
#4
2
This did not work for me and so I thought I would mention what did. I had to add overflow:hidden to all of the surrounding elements.
这对我不起作用，所以我想我会提到它做了什么。我不得不添加溢出：隐藏到所有周围的元素。
#5
0
After trying the above suggestons, adding a z-index to the item the hover effect was being applied to solved the problem for me.
在尝试上述建议后，在项目中添加z-index，正在应用悬停效果来解决问题。