8

在分析不同 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/

4

2 回答 2

2

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

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

于 2014-12-08T12:46:31.660 回答
0

您是否希望鼠标静止且目标在鼠标下方移动时触发悬停？如果我没记错的话，仅当鼠标移动或单击按钮时才会发送事件。如果鼠标没有做任何事情，那么什么都不会触发，包括悬停。事件是基于用户输入的，所以如果没有用户输入，就没有事件。

您可以看到，如果您在元素上缓慢地来回移动鼠标，悬停状态将正常工作。如果您不移动鼠标，问题似乎只会出现。

也就是说，除非我错过了这个问题，所以如果我不理解，请澄清。

于 2013-08-29T23:27:24.207 回答