javascript - jQuery 避免切换 div 在特定区域时隐藏

Question

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

我的问题是，当我将鼠标移向悬停的 (#test) 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();

});

我该如何解决这个问题？

Answer 1

你的代码工作正常，如果你移动红色边框可以点击链接，看这个:

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

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

li {
      border: 1px solid red;
}

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

<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>
    </li>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

但最好的方法是使用点击事件，见下面的例子:

$(document).ready(function() {
    
    $("#hoverer").on("click",function(){
        $("#test").toggle(500);
    })
    
})

<li id="hoverer" class="tab-link" data-tab="ideas_by_stage" style="position:relative">Click For Show / Hidden
        </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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>