Javascript 切换jquery-问题

我有这个

但是，当鼠标向左或向右拖动时，将停止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();
});

div.fileinputs{
位置：相对位置；
显示：无；
}
#展示{
宽度：200px；
高度：40px；
背景色：红色；
z指数：-2px；
位置：绝对位置；
}
可视面板分区
$（'#show'）.mouseover（函数（）{
$（'.fileinputs'）.toggle（）；
});

我想这是因为你在节目中把z-index设置为-2。一旦fileInputs div可见，它就会在show上方变为，因此show的mouseover不再响应

---

如果您注意到，如果您将鼠标从左向右悬停在红色的show div上，但刚好在文本所在位置下方，

fileinputs

div实际上会切换。

如果您只想在mouseover上显示元素，然后在mouseout上隐藏它，您还应该使用

mouseout（）

要定义移除鼠标时所需的行为，请执行以下操作：

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

。（因为

fileinputs

是一个单独的元素，所以它是不稳定的，并且它不将悬停在上面的元素计算为悬停在show div上）

但您应该使用hover，以便更轻松：

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

。（由于与上述相同的原因而起伏）

因为您想要的行为是明确的，所以当鼠标在上面时，我们将使用

show（）

，当鼠标被移除时，我们将使用

hide（）

顺便说一下，您最好使用

delegate（）

（对于较旧版本的jQuery）或

on（）

（对于jQuery 1.7+）绑定事件：

不过，您真的应该使用CSS来实现这一点。您可以将

fileinputs

放在

show

的内部，并使用子选择器：

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

---

。这个元素不会闪烁，因为元素位于附加了悬停声明的元素内部，CSS将其视为仍然悬停在父元素上（因为从技术上讲，悬停的目标位于父元素的边界内）[如果它在边界之外，它仍然可以工作，因为元素仍然是嵌套的]。

如果在

fileinputs

div周围添加一个边界，则行为的原因会更清楚

见：

将光标移动到两个div重叠的区域上会触发鼠标悬停事件，显示隐藏的

文件输入

div。由于该div现在显示在

显示

的顶部，因此光标不再直接位于原始

显示

div上。然后，当光标移到

div外时，您可以继续移动光标>fileinputs

区域，该移动被视为底层

show

div的另一个入口。它再次触发

.toggle（）

，重新隐藏

fileinputs

div

---

一个快速修复方法是切换到jQuery自定义事件，而不是

mouseover

（尽管在jQuery解释“over”的含义时，您可能会得到一些不稳定的工件）。根据您试图实现的目标，另一个选项是按z索引对两个div重新排序。

我不确定我是否理解--您希望div在mouseover上显示，然后在mouseout上隐藏？没错。悬停（）事件只有在div不重叠的情况下才能正常工作。您应该将

div.fileinputs

放在元素内部，因为否则jQuery认为它是一个新元素+1，但您知道为什么会出现这种情况吗？我认为这会顺利工作@AdamRackis:闻起来又像是元素分离的冲突。我不认为Javasc在将鼠标悬停在子对象上时，在父对象上的悬停事件与CSS的工作方式完全相同。但奇怪的是，在

on（）

函数中的事件中添加

mouseout

，可以使其顺利工作。无法进一步解释…我将对此进行研究。

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