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

Question

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

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

在鼠标悬停时，我将悬停的 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');
});

正如您在随附的 fiddle 中看到的那样，translate3d 显示非常不稳定的 jQuery 悬停，而 translate 正常。

有人知道这是为什么吗？

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

Answer 1

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

检查这个: https://code.google.com/p/chromium/issues/detail?id=246304