jQuery避免在某個區域隱藏切換div

Question

我有一些jQuery，做鏈接菜單懸停效果。

我的問題是，當我移動鼠標去徘徊（#test）股利，股利隱藏，所以我永遠不能夠點擊下面的鏈接。

下面的代碼：

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

Answer 2

您可以使用不同的方法：

• hoverer：上了mouseenter顯示測試
• 測試：在鼠標離開躲測試

調整hoverer和測試元件的尺寸，使得這種方法可以工作（即：如果您離開div但進入li區域，您將獲得兩個連續事件：隱藏+顯示）。

的片段：

$("#hoverer").on('mouseenter', function(e) { 
 
    $('#test').show(); 
 
}); 
 
$('#test').on('mouseleave', function(e) { 
 
    $('#test').hide(); 
 
});

#hoverer { 
 
    background-color: lightblue; 
 
}

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

 

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

Answer 3

http://api.jquery.com/hover/

$("#hoverer").hover(function() { 
 
     $('#test').fadeIn(); 
 
}); 
 

 
$("#test").hover(function() { 
 
     $(this).fadeIn(); 
 
}, function() { 
 
     $(this).fadeOut(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <li id="hoverer" class="tab-link" data-tab="ideas_by_stage" style="position:relative">Hover here...</li> 
 

 
\t <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;"> 
 

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

 
\t </div>