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

问题与：之前的伪类有关。看起来像是在该类上触发悬停。如果你删除它，它就可以正常工作。

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

<强>更新

如果：在需要伪元素之前，则可以在父元素上触发悬停。我还必须添加一些其他样式，以使伪元素显示在顶部。

.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 here - http://jsfiddle.net/qGAn9/2/

为什么此悬停转换在Chrome中不起作用？

1 个答案: