translate3d（）导致jQueryhover/单击事件无法正确触发

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

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

在翻转时，我将hover的LI背景设置为GREEN。

注意：为webkit构建测试

HTML

 
 
content
 
content
 ... 
  

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显示非常错误的jQueryhover，而翻译是可以的。

任何人都有任何线索，为什么这是？

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

Answer 1

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

请检查： https ： //code.google.com/p/chromium/issues/detail？id = 246304

Answer 2

当鼠标静止且目标在鼠标下方移动时，您是否期望触发hover？ 仅当鼠标处于运动状态时才会发送事件，或者如果我没记错，则会单击一个按钮。 如果鼠标没有执行任何操作，则不会触发任何操作，包括hover。 事件基于用户输入，因此如果没有用户输入，则没有事件。

您可以看到，如果您在元素上来回缓慢移动鼠标，则hover状态将正常工作。 如果您不移动鼠标，似乎只会出现此问题。

也就是说，除非我错过了这个问题，所以请澄清我是否不理解。