jQuery-如果鼠标悬停，则保持向下滑动的 DIV 可见答案

【问题标题】：jQuery-Keep slidedown DIV visible if mouseover itjQuery-如果鼠标悬停，则保持向下滑动的 DIV 可见
【发布时间】：2012-03-14 05:58:30
【问题描述】：

我有一个链接 (BTN-SLIDE)，当单击它时（而不是悬停时），它会向下滑动另一个 DIV（称为 PANEL），类似于下拉菜单。

我想确保下拉 DIV 在以下情况下淡出： a) 鼠标离开链接 b) 鼠标离开下拉 DIV

但我也希望下拉 DIV 在鼠标悬停时保持可见。

这是我的代码。问题是当我单击打开下拉 DIV (#panel) 并离开链接 (.btn-slide) 而不将鼠标悬停在#panel 上时，#panel 将永远不会关闭。

另一方面，如果我将#panel 设置为在鼠标离开链接时关闭，那么即使我将鼠标悬停在它上面，#panel 也会关闭。

有什么解决办法吗？谢谢！

<a class="btn-slide" href="#”>Click here to open Panel</a>    
<div id="panel"><p>ahsjdhkashdkasjhd</p></div>

$(".btn-slide").click(function(){
  $("#panel").slideDown(500);
});

     $("#panel").mouseleave(function(){
        $("#panel").slideUp(500);
});

【问题讨论】：

标签： jquery drop-down-menu mouseover mouseenter mouseleave

【解决方案1】：

您可以将两个元素包装在父元素中并从中获取 mouseleave 触发器。 http://jsfiddle.net/UCrQF/

【讨论】：

我怎么可能不考虑这个？非常感谢！
没问题。如果这正确回答了您的问题，请将其标记为已回答。谢谢！
还有一个问题：如果我的链接是一个 20x20 的小图标，而#panel div 是图标下方的 300x300 框，那么如果我旁边有多个下拉菜单，您的方法将不起作用另一个
更具体地说，它不会起作用，因为下拉框宽度将是 300px，因此“悬停”区域将大于图标本身，只有 20px
嗯..可以用JSFiddle来演示吗？标记/CSS 将在我们如何调试它方面发挥重要作用。