Javascript jQuery避免在特定区域上隐藏切换div

我有一些jquery，它可以实现链接菜单悬停效果

我的问题是，当我将鼠标移向悬停的测试div时，div会隐藏，因此我永远无法单击下面的链接

代码如下：

//HTML

<li id="hoverer" class="tab-link" data-tab="ideas_by_stage" style="position:relative">Hover here...</li>

<div id="test" style="display:none;position:absolute;z-index:999999;border:1px solid grey;width:200px;padding:4px 10px;left:170px;background-color:white;">

    <div class="btn"><a href="">Option 1</a></div>
    <div class="btn">Option 2</div>
    <div class="btn">Option 3</div>
    <div class="btn">Option 4</div>

</div>

//jQuery

$( "#hoverer" ).hover(function() {

      $('#test').toggle();

});

---

如何解决此问题？

您可以使用不同的方法：

悬停者：在鼠标上显示测试 测试：鼠标移动隐藏测试 调整悬停器和测试元素的尺寸，使这种方法可以工作，即：如果您离开div，但进入li区域，您将获得两个连续事件：hide+show

片段：

$hover.在mouseenter上，函数e{ $‘测试’。显示； }; $'test'。在'mouseleave'上，函数e{ $'test'。隐藏； }; 气垫船{ 背景颜色：浅蓝色； } 在这里停留。。。 选择2 选择3 选择4 $hover.hover函数{ $'test'.fadeIn； }; $test.hoverfunction{ $this.fadeIn； }，功能{ $this.fadeOut； }; 在这里停留。。。 选择2 选择3 选择4 您的代码工作正常，如果您在红色边框中移动，可以单击链接，请参见以下内容：

$hover.hover函数{ $‘测试’。切换； } 李{ 边框：1px纯红； } 在这里停留。。。 选择2 选择3 选择4