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