Question

我遇到了这个问题：

$('#d3').show();
$('#d1, #d2').mouseenter(function(){
    $( "#d3" ).animate({
            width: "70%"
        }, 300 );
}).mouseleave(function(){
    $( "#d3" ).animate({
            width: "20%"
        }, 300 );
});

http://jsfiddle.net/2ep48y33/

当从一个元素传递到另一个元素时，它会触发一个开始动画的元素的鼠标离开。我想阻止它并使它们表现得像一个元素。我在体育场内很难改变html命令来制作父元素。

我期待这种行为，但我想尝试一下。

有可能吗？

谢谢！

Answer 1

您需要使用event.toElement或e.relatedTarget，这样您的jQuery代码就会变成 -

$('#d3').show();
$('#d1, #d2').mouseenter(function(){
    $( "#d3" ).animate({
            width: "70%"
        }, 300 );
}).mouseleave(function(e){
    var goingTo = e.toElement;
    if($(goingTo).attr('id')!='d1'&&$(goingTo).attr('id')!='d2')
    { 
        $( "#d3" ).animate({
        width: "20%"
      }, 300 );
     }
});

这是一个更新的小提琴 - http://jsfiddle.net/2ep48y33/1/

JQuery - 鼠标上的2个元素相互触发

1 个答案: