javascript - 切换 jquery - 问题

Question

我有这个demo

但是，当向左或向右拖动时，鼠标悬停在上方会停止切换。hover() 事件没有解决问题。

有什么想法吗？

div.fileinputs {
    position: relative;
    display: none;
}

#show {
    width: 200px;
    height: 40px;
    background-color: red;
    z-index: -2px;
    position: absolute;
}

<div id="show"></div>

<div class="fileinputs">Visible Panel Div</div>

$('#show').mouseover(function() {
    $('.fileinputs').toggle();
});

Answer 1

鉴于您只想在鼠标悬停时显示元素，然后在鼠标移出时隐藏它，您还应该使用 mouseout() 来定义鼠标移开时所需的行为:

$("#show")
    .mouseover(function(){
        $(".fileinputs").toggle();
    })
    .mouseout(function(){
        $(".fileinputs").toggle();
    });

Example . (它是断断续续的，因为 fileinputs 是一个单独的元素，它不把悬停在它上面算作悬停在 show div 上)。

但是你应该使用悬停，只是为了更容易:

$("#show").hover(function(){
    $(".fileinputs").show();
}, function(){
    $(".fileinputs").hide();
});

Example . (由于与上述相同的原因而断断续续)。

由于您想要的行为是明确的，我们将只在鼠标悬停在上面时使用 show()，在鼠标移开时使用 hide()。

顺便说一句，您最好使用 delegate()(对于旧版本的 jQuery)或 on()(对于 jQuery 1.7+)来绑定(bind)事件:

$(document).on("mouseover mouseout", "#show", function(){
    $(".fileinputs").toggle();
});

Example .

不过，您真的应该为此使用 CSS。您可以将 fileinputs 放在 show 中并使用子选择器:

#show:hover > .fileinputs {
    display: block;
}

Example .这个不会闪烁，因为该元素位于附加悬停声明的元素内，并且 CSS 认为您仍在悬停在父元素上(因为从技术上讲，悬停的目标在其中父级的边界[如果它在边界之外它仍然有效，因为元素仍然是嵌套的])。