translate3d（）jQueryのホバー/クリックイベントが正しく発生しないようにする

Question

異なる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のホバーを表示していますが、翻訳は大丈夫です。

これはなぜですか？

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

Answer 1

あなたは、マウスが静止しており、ターゲットはマウスの下に移動したときホバリングトリガされることを期待していますか？イベントが送信されるのは、マウスが動いているとき、または正しくリコールすればボタンがクリックされたときだけです。マウスが何もしていなければ、ホバーを含む何もトリガーしません。イベントはユーザー入力に基づいているため、ユーザー入力がなければイベントはありません。

要素上でマウスをゆっくりと前後に動かすと、ホバー状態が適切に機能することがわかります。この問題は、マウスを動かさなければ表示されないようです。

つまり、私が問題を抱えていない限り、理解していないかどうかを明確にしてください。

Answer 2

これは既知の問題です。 要素が表示されているマウスカーソルの下に表示されているときに、その要素が移動したり表示されたりすると、要素のホバー効果が呼び出されません。 https://code.google.com/p/chromium/issues/detail?id=246304