我想要实现一个非常简单的功能:在鼠标悬停时改变表格行的透明度。
不幸的是,它并不十分有效,因为如果我快速地在悬停和离开之间切换,有时透明度变化太慢,看起来颜色会闪烁。当我缓慢地悬停和离开时,这种闪烁就不会发生。
我制作了一个示例,让您知道我的意思:
这种行为是浏览器的bug还是我的代码有问题?有没有办法修复它?我已经尝试使用Jquery脚本来代替CSS中的透明度变化,但结果是一样的 :/
我想要实现一个非常简单的功能:在鼠标悬停时改变表格行的透明度。
不幸的是,它并不十分有效,因为如果我快速地在悬停和离开之间切换,有时透明度变化太慢,看起来颜色会闪烁。当我缓慢地悬停和离开时,这种闪烁就不会发生。
我制作了一个示例,让您知道我的意思:
这种行为是浏览器的bug还是我的代码有问题?有没有办法修复它?我已经尝试使用Jquery脚本来代替CSS中的透明度变化,但结果是一样的 :/
哈,这几乎是 Webkit 有时候会出现的同样问题。所以,我尝试模拟了 Webkit 的解决方法(使用 -webkit-transform: translateZ(0)
),但是使用了 2D 变换,它奏效了!
因此,似乎只需为受到闪烁影响的元素添加 -moz-transform: rotate(0);
就可以解决问题:http://jsfiddle.net/kizu/yfhTW/4/
zoom:1
一样 :) - kizu尝试将 border: 1px solid transparent;
添加到元素中(而不是:hover
伪类)。这对我起作用了。
如果您在此处使用的图像不透明度不为1且存在类似闪烁的问题,请确保在图像上设置background-color:white;
!我知道这并没有解决当前的问题,但它是一个类似的问题。
.post img { opacity:.8; background-color:white; }
.post:hover img { opacity:1; }
如果受影响的元素已经被翻译(因此,kizu 的修复方法不适用),请确保设置 -webkit-backface-visibility
:
最初的回答来自 kizu:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
这个方法对我无效,所以我想提一下我的做法。我不得不在所有周围的元素中添加 overflow:hidden。
在尝试了上述建议之后,为应用悬停效果的项目添加z-index属性解决了我的问题。
<td>
的默认display:table-cell
相关。当我更改为display:block
时,问题消失了,但当然表格布局出现了问题。由于您的不透明度更改仅会更改颜色,因此是否可以改用:hover
上的颜色更改来实现它? - Pat