Question

问题：在外部div上方悬停会触发预期的幻灯片方法，但如果鼠标在外部div中移动，则不会触发一次，而是多次。我不认为这是一个冒泡的问题，因为事件绑定到父元素而不是子元素。我还通过使用stopPropagating（）;

防止事件“冒泡”

这是html标记：

<div class="outer">
    <div class="inner">Lorem ipsum dol
    <div class="clear"></div></div>
</div><div class="clear"></div>

和css：

.outer {
    float: left;
    width: 220px;
    height: 200px;
    background-color: #06F;
}
.inner {
    float: left;
    width: 220px;
    height: 99px;
    background-color: #0F6;
    margin-top: 100px;
}

和jquery

$(".outer").hover(function(e){
    e.stopPropagation();
    //$(".inner").fadeOut("slow");
    $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow");
}, function(e){
    e.stopPropagation();
    //$(".inner").fadeIn("slow");
    $(".inner").stop(true, true).show("slide", {direction: "down"}, "slow");
});

注释代码顺便说一下。

jsfiddle链接：http://jsfiddle.net/94hvS/

Answer 1

处理此问题的一种方法是使用全局布尔变量来了解您是否已经滑动了对象：

var sliding = false;
$(".outer").hover(function(e){
    e.stopPropagation();
    //$(".inner").fadeOut("slow");
    if(!sliding) {
        sliding = true;
        $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow", function() { sliding = false; });
    }
}, function(e){
    e.stopPropagation();
    //$(".inner").fadeIn("slow");
    if(!sliding) {
        sliding = true;
        $(".inner").stop(true, true).hide("slide", {direction: "down"}, "slow", function() { sliding = false; });
    }
});

我不确定function() { sliding = false; }是否在正确的位置，但必须在动画完成时调用它。

Answer 2

看起来覆盖ui-effects-wrapper（由幻灯片动画创建）正在重置您的悬停状态。我能想到的一件事就是在this之类的变量中手动记住悬停状态。拉姆，但工作。
不确定是否有更优雅的解决方案。

jquery ui - 将鼠标悬停在父元素上应触发子元素上的向下滑动

2 个答案: