Javascript translate3d（）导致jQuery悬停/单击事件无法正确触发

在分析不同CSS动画类型上的jQuery鼠标事件时，我注意到translate3d会导致悬停和其他事件无法正确触发

在一个基本示例中，我正在从右到左设置块列表的动画

翻滚时，我将悬停的LI背景设置为绿色

注意：测试是为webkit构建的

HTML

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

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悬停，而translate是ok的

有人知道这是为什么吗

---

当鼠标静止且目标在鼠标下移动时，是否会触发悬停？只有当鼠标处于运动状态或单击按钮（如果我回忆正确）时，才会发送事件。如果鼠标没有执行任何操作，则不会触发任何操作，包括悬停。事件基于用户输入，因此如果没有用户输入，就没有事件

您可以看到，如果在元素上缓慢地来回移动鼠标，悬停状态将正常工作。只有在不移动鼠标的情况下，问题才会出现

也就是说，除非我遗漏了问题，如果我不理解，请澄清。

这是一个已知问题。 当元素出现在可见鼠标光标下时，Chrome不会通过移动或变得可见来调用元素的悬停效果

选中此项：

---

我会注意到，动画完成后，悬停对translate3d有效。一旦动画完成，你“重置”了动画，如果你把鼠标从红色区域移到白色区域，它似乎会触发鼠标指针/鼠标移动，而不是当你的鼠标在盒子上时…非常有趣…你有没有找到解决这个问题的方法？我希望鼠标移动时会触发鼠标悬停。如果您在所附视频中看到，即使在鼠标移动期间，也不会使用translate3d触发悬停。代码本身非常基本，所以这就是我的问题。它适用于转换，但不适用于translate3d。您使用的具体浏览器、版本和操作系统是什么？我无法在Safari、Chrome、Firefox或OS X 10.7上的IE（虚拟机）上复制此功能

$('.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');
});