切换jQuery的 - 问题

但是鼠标时拖动到向左或向右停止的toogle。悬停（）事件没有解决问题。

有什么想法？

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(); 
});

来源

2011-12-30 Daniel

我不知道我明白 - 你想要div显示onmouseover，然后隐藏onmouseout？ – Purag 2011-12-30 04:45:30

。只有当div不重叠时，hover（）事件才能正常工作。 – Daniel 2011-12-30 04:47:12

你应该把'div.fileinputs'放在元素中，否则jQuery会认为它是一个新元素http://jsfiddle.net/rXYA9/2/ – noob 2011-12-30 04:47:50

既然你想简单地显示在鼠标悬停的元素，然后把它隐藏鼠标移开时，你也应该使用mouseout()定义当鼠标被删除你想所需的行为：

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

Example。（这是不稳定的，因为fileinputs是一个单独的元素，它不会盘旋在展览div上盘旋）。

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

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

Example。（因为与上述相同的原因而Ch））。

由于您的期望行为是明确的，因此我们将在鼠标移过时使用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认为它好像仍然在父元素上方悬停（因为在技术上，因为悬停的目标是在父母的边界[如果因为元素仍然嵌套在边界之外，它仍然可以工作]）。

来源

2011-12-30 04:52:02 Purag

+1，但是你知道为什么这是不稳定吗？我会认为这将工作顺利http://jsfiddle.net/rXYA9/12/ – 2011-12-30 05:17:19

@AdamRackis：闻起来像元素分离再次冲突。当你将鼠标悬停在儿童身上时，我认为Javascript对于父母的悬停事件并不完全像CSS一样。奇怪的是，在'on（）'函数中为'eventout'添加'mouseout'使其顺利运行。无法真正解释它......我会研究这一点。 – Purag 2011-12-30 05:21:11

我认为这是因为你将z-index设置为-2。一旦fileInputs div可见，它将在显示之上变为，因此，showover的mouseover不再响应。

如果你注意到，如果你从左到右悬停在红色的div上，但是在文本的下面，fileinputs div实际上会切换。

来源

2011-12-30 04:45:16

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

参见：http://jsfiddle.net/pS9L8/

移动你的鼠标指针放在两个重叠的div触发鼠标悬停事件，显示了隐藏fileinputs格的区域。由于该div现在显示在show之上，因此您的光标不再位于原始show div的正上方。然后你继续移动你的光标，当它移动到fileinputs区域之外时，该移动被看作另一个入口到底层show div。这再次触发.toggle()，重新隐藏了fileinputs股利。

一个快速解决方法是切换到jQuery自定义事件mouseEnter而不是mouseover（尽管由于jQuery对“over”的含义的原因，您可能会得到一些生涩的文物）。根据你想要达到的目标，另一种选择是通过z-index对两个div进行重新排序。

来源

2011-12-30 04:58:55

切换jQuery的 - 问题

回答

相关问题