Question

我有demo

然而，当向左或向右拖动鼠标时会停止toogle。 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上隐藏它，您还应该使用mouseout()来定义移除鼠标时所需的行为：

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

Example。（它不稳定，因为fileinputs是一个单独的元素，并且它不计算将鼠标悬停在显示div上方。）

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

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

Example。（由于与上述相同的原因，波涛汹涌）。

由于您所希望的行为是明确的，我们只需在鼠标悬停时使用show()，在删除鼠标时使用hide()。

顺便说一下，最好使用delegate()（对于旧版本的jQuery）或on()（对于jQuery 1.7 +）来绑定事件：

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

Example

尽管如此，你真的应该只使用CSS。您可以将fileinputs放在show内并使用子选择器：

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

Example。这个没有闪烁，因为元素位于附加悬停声明的元素内部，而CSS认为它好像你仍然悬停在父元素上（因为你在技术上是，作为悬停的目标位于父级的边界内[如果它在边界之外，它仍然可以工作，因为该元素仍然是嵌套的]。）

Answer 2

我认为这是因为你将show上的z-index设置为-2。一旦fileInputs div可见，它就会显示，因此，show for mouse不再响应。

如果您注意到，如果您在红色节目div上从左向右悬停，但在文本所在的位置下方，则fileinputs div实际上会切换。

Answer 3

如果在fileinputs div周围添加边框，则行为的原因将更清晰。

请参阅：http://jsfiddle.net/pS9L8/

将光标移动到两个div重叠的区域会触发鼠标悬停事件，显示隐藏的fileinputs div。由于该div现在显示在show之上，因此您的光标不再直接位于原始show div之上。然后，您继续移动光标，当它移动到fileinputs区域之外时，该移动被视为底层show div的另一个入口。这再次触发.toggle()，重新隐藏fileinputs div。

一个快速解决方法是切换到jQuery自定义事件mouseEnter而不是mouseover（尽管你可能会得到一些jerky工件，因为jQuery有关“over”的意思）。根据你想要实现的目标，另一个选择是按z-index重新排序两个div。

切换jquery - 问题

3 个答案: