爲什麼這個懸停過渡在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

這個問題涉及到：在僞類之前。這個類似乎沒有觸發懸停。如果你刪除它，它工作得很好。

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

UPDATE：

如果：需要僞元素之前，那麼你就可以觸發父元素上懸停。我還必須添加一些其他樣式來使僞元素顯示在最上面。

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