在悬停时更改不透明度会导致文本闪烁。

Question

在悬停时更改不透明度会导致文本闪烁。

6

我正在尝试做一些非常简单的事情，一个段落的不透明度设置为0，在鼠标悬停在父div上时，段落的不透明度变为1，透明度变化后会发生文本变化，它不完全是闪烁，文本有点自我调整，这有点奇怪。

这是fiddle链接：http://jsfiddle.net/krish7878/7t6GM/ HTML代码:

 <div class="para">
    <p> SOME SAMPLE TEXT </p>
 </div>

CSS 代码：

    .para{
         width: 1000px;
         border: 1px solid #000;
    }
    .para p{
        font-family: Arial, sans-serif;
        font-size: 80px;
        opacity: 0;
    }
    .para:hover p{
        opacity: 1;

        transition:         all 400ms ease;
        -moz-transition:    all 400ms ease;
        -webkit-transition: all 400ms ease;
        -o-transition:      all 400ms ease;
        -ms-transition:     all 400ms ease;
    }

- chandan

你使用的是哪个浏览器？对我来说似乎运行良好。 - Krimson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

解决方案是将 backface-visibility 属性的值改为 hidden。

默认值为 visible。 更新后的示例。

.para p {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-family: Arial, sans-serif;
    font-size: 80px;
    opacity: 0;
}