google-chrome - 为什么这种悬停过渡在 Chrome 中不起作用？

Question

我一直在想 this issue 过去几天，但我无法弄清楚到底是什么问题。

考虑以下来自 style.css 的片段:

.tint:before {
        -moz-transition: all .3s linear;
     -webkit-transition: all .3s linear;
         -ms-transition: all .3s linear;
          -o-transition: all .3s linear;
             transition: all .3s linear;
}
.tint:hover:before {background:rgba(159,182,205,0.1);}

正如您从上面的代码中看到的那样，在图像悬停时，应该会出现“色调”过渡，以使用户想要点击该图像。但是，此功能在 Chrome 中不起作用。

为什么悬停过渡在 Chrome 中不起作用，但在 Firefox 中却完美无缺？

这是预期的行为吗？或者 Chrome 没有正确呈现这些过渡？

Answer 1

问题与 :before 伪类有关。似乎没有在该类(class)上触发悬停。如果您删除它，它就可以正常工作。

.tint {
 -moz-transition: all .3s linear;
 -webkit-transition: all .3s linear;
 -ms-transition: all .3s linear;
 -o-transition: all .3s linear;
 transition: all .3s linear;
}
.tint:hover{background:rgba(159,182,205,0.1);}

这是 jsFiddle - http://jsfiddle.net/qGAn9/

更新:

如果需要 :before 伪元素，那么你可以在父元素上触发悬停。我还必须添加一些额外的样式以使伪元素出现在顶部。

.tint:before {
     -moz-transition: all .3s linear;
     -webkit-transition: all .3s linear;
     -ms-transition: all .3s linear;
     -o-transition: all .3s linear;
     transition: all .3s linear;

    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
}

.tint:hover:before{background:rgba(159,182,205,0.5);}

jsFiddle 在这里 - http://jsfiddle.net/qGAn9/2/