懸停狀態在動畫上無法正常工作

我有一個元素，當用戶將鼠標懸停在它上面時（:hover），它將從左到右進行動畫處理，因此元素將脫離鼠標。所以:hover狀態應該恢復到正常狀態，但這不會發生。哪裏不對？懸停狀態在動畫上無法正常工作

#test { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100px; 
    height: 100px; 
    background: red; 
    z-index: 20; 
    transition: left 1s linear; 
} 

#test:hover { 
    left: 200px; 
    background: green; 
}

enter image description here

這裏是jsFiddle demo。

來源

2013-09-24 user2480690

您發現了Chrome bug。它適用於Firefox。 – SLaks

@SLaks在firefox（Windows 8上的版本24）中，它看起來很陌生，它會在一段時間後恢復（不是在元素離開鼠標後立即返回）。 – user2480690

得到完全卡住我的鼠標在Firefox和變成了癲癇閃存盒。這有什麼實際用途？ –

在

#test:hover { 
    left: 100px; 
    background: green; 
}

你告訴元素本身的寬度和過渡迫使它這樣做外面去。如果您將懸停轉換更改爲left: 100px;，它將起作用。

過渡是主人，並將鼠標懸停在你的身上;）

來源

2013-09-24 16:31:00 LexLusa

懸停狀態在動畫上無法正常工作

回答

相關問題