translate3d（）導致jQuery懸停/點擊事件無法正確觸發

Question

在分析不同CSS動畫類型的jQuery鼠標事件時，我注意到translate3d導致懸停和其他事件無法正確觸發。

在一個基本的例子中，我從右向左設置了一個塊列表的動畫。

在翻轉時，我將懸停的LI背景設置爲綠色。

注：測試是專門爲WebKit的

HTML

<div class="container"> 
    <ul> 
     <li>content</li> 
     <li>content</li> 
     ... 
    </ul> 
</div> 

CSS

.container{ 
    position: absolute; 
    left: 600px; 
    top: 0; 
} 

.container ul{ 
    list-style: none; 
    width: 9999px; 
} 

.container ul li{ 
    width: 200px; 
    height: 400px; 
    float: left; 
    background: red; 
    margin: 4px; 
} 

.animate-3d{ 
    -webkit-transition: -webkit-transform 10s linear; 
    -webkit-transform: translate3d(-6000px, 0px, 0px) 
} 

.animate-transition{ 
    transition: left 10s linear; 
    left: -6000px; 
} 

jQuery的

$('.event').bind('click', function(){ 
    $('.container').addClass('animate-3d'); 
}); 

$('.event-transition').bind('click', function(){ 
    $('.container').addClass('animate-transition'); 
}); 

$('li').bind('mouseenter mouseleave', function(e){ 
    if(e.type == 'mouseenter') 
     $(this).css('background', 'green'); 
    else 
     $(this).css('background', 'red'); 
}); 

正如你可以在附帶的小提琴中看到的，translate3d顯示了非常符合jQuery的盤旋，而翻譯是好的。

任何人都有任何線索，爲什麼這是？

http://jsfiddle.net/jkusachi/j2PSw/2/

Answer 1

你期待懸停被觸發，當鼠標靜止和鼠標下一個目標的動作？只有當鼠標在運動中時纔會發送事件，或者如果我正確記憶，則會單擊按鈕。如果鼠標沒有做任何事情，則不會觸發任何事情，包括懸停。事件基於用戶輸入，所以如果沒有用戶輸入，則不存在事件。

您可以看到，如果您將鼠標在元素上來回緩慢移動，懸停狀態將正常工作。如果您不移動鼠標，問題似乎只會出現。

也就是說，除非我錯過了這個問題，所以請澄清我是否不理解。

Answer 2

這是一個已知問題。 當元素出現在可見鼠標光標下方時，通過移動或變爲可見，Chrome不會調用元素的懸停效果。

檢查： https://code.google.com/p/chromium/issues/detail?id=246304