为什么这个悬停过渡不工作在Chrome

Question

我在过去的几天里一直在思考这个问题，但我不知道到底是什么问题。

考虑以下来自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伪类有关。这个类似乎没有触发悬停。如果你把它去掉，它就会正常工作。

.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/

更新:

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

.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/