0

过去几天我一直在考虑这个问题，但我无法弄清楚究竟是什么问题。

考虑以下来自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 不能正确呈现这些过渡？

4

1 回答 1

2

该问题与 :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/

更新：

如果需要 :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/

于 2013-04-14T16:13:47.900 回答