CSS3 3D動畫無法使用：懸停屬性

我不是一個Web開發人員，但我涉足3D CSS轉換和動畫，並發現它們沒有互動：按照我希望或期望的方式懸停。我無法容易地找到任何免責聲明，這是一個已知的問題，所以我想知道如果我只是做錯了什麼。CSS3 3D動畫無法使用：懸停屬性

要簡單地重現該問題，從這個演示3D立方體動畫這裏開始：

它添加到樣式部分的底部：

#cube div:hover { 
    background-color: white; 
}

我在看那使用Chrome。我希望，既可以旋轉立方體，也可以移動光標（或不移動），包含光標的前端將具有白色背景。但在實踐中，這並不正確。如果我將光標滾動到動畫上，它會挑選出正確的面板來突出顯示，但當它應該時，它往往無法更新。最明顯的是，如果我停止移動鼠標，它似乎沒有檢測到光標可能在什麼元素上徘徊。

這是一個已知的缺點嗎？有沒有人有辦法解決嗎？

它在Mozilla中按預期工作，所以這可能是Chrome中的一個缺陷。回來一年左右，它會被修復。順便說一下，我遇到了cssdesk的麻煩，但是這裏有一個[jsfiddle]（http://jsfiddle.net/9Lmry/），它有你的補丁。 –

我已經評論過，但我沒有注意到這個問題是鼠標移動的要求。 –

看來Chrome的Webkit引擎與Firefox的Gecko引擎有所不同。 Firefox不斷運行以檢查懸停狀態，而Chrome則不會。

我在Chrome和Safari（都運行Webkit）中測試過它們，它們有類似的結果。如果保持鼠標靜止，它們不會更新懸停狀態。另一方面，當鼠標停留在同一個地方時，Firefox不斷地檢查懸停區域。

2014-01-22 09:28:42 jpostdesign

回答