translate3d() 导致 jQuery 悬停/单击事件无法正确触发

在分析不同 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 悬停，而 translate 则正常。

有人知道这是为什么吗？

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

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

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