translate3d() causing jQuery hover/click events to not fire correctly

可紊 提交于 2019-12-22 04:20:34

问题


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

In a basic example, I am animating a list of blocks from right to left.

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

note: tests are built for 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');
});

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/


回答1:


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.

Check this: https://code.google.com/p/chromium/issues/detail?id=246304




回答2:


Are you expecting hover to be triggered when the mouse is stationary and a target moves under the mouse? Events are only sent when the mouse is in motion or a button is clicked if I recall correctly. If the mouse isn't doing anything, then nothing will trigger, including hover. Events are based on user input, so if there is no user input, there is no event.

You can see that if you move the mouse slowly back and forth over the elements, the hover state will work properly. The problem only seems to appear if you do not move the mouse.

That is, unless I am missing the problem, so please clarify if I am not understanding.



来源:https://stackoverflow.com/questions/18496551/translate3d-causing-jquery-hover-click-events-to-not-fire-correctly

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!