Google chrome 为什么这个悬停转换在Chrome中不起作用？

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

考虑一下中的以下片段：

.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没有正确呈现这些转换？

问题与：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);}

这是JSFIDLE-

更新：

If：在需要伪元素之前，可以触发父元素上的悬停。我还必须添加一些额外的样式，以使伪元素显示在顶部

.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);}

---

jshiddle here-

我感觉最近有人在使用Chrome:D的一些有漏洞的测试版，它适合我。：）@KaloyanIvanov你有什么版本的Chrome？上面写着26.0.1410.64。请说明效果在哪里/应该是什么，以便我们更容易看到Chrome版本是否存在相同的问题。与以下内容相关的任何关系：？明确声明

：before

，以便色调转换在图像顶部工作。不使用

：before

将阻止过渡显示在图像顶部。根据您的评论更新了我的答案。要使用

：hover:before

，还定义了

：hover

CSS规则（可以为空）。