translate3d（）导致jQuery悬停/点击事件不能正确触发 [英] translate3d() causing jQuery hover/click events to not fire correctly

问题描述

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

When analyzing jQuery mouse events on different CSS Animation types, I'm noticing that translate3d causes hover and other events to not fire correctly.

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

On rollover, I am setting the hovered LI background to GREEN.

注意：测试是为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显示非常erradic jQuery悬停，而translate是确定。

As you can see in the accompanied fiddle, translate3d is showing very erradic jQuery hovers while translate is ok.

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

anyone have any clues as to why this is?

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

推荐答案

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

This is a known issue. Chrome does not invoke an element's hover effect when the element appears underneath a visible mouse cursor, either by moving or becoming visible.

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

这篇关于translate3d（）导致jQuery悬停/点击事件不能正确触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！