jQueryは特定の領域にあるときにdivを非表示にすることを避ける

Question

私はリンクメニューホバー効果を行ういくつかの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(); 

}); 

はどうすればこの問題を解決することができますか？

• hoverer：MouseEnterイベントショーテスト
• テストについて：このアプローチようmouseleave非表示テスト

にhoverer、テスト要素の大きさを調整し

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

あなたは異なるアプローチを使用することができます（つまり、divを残してliエリアに入ると、2つの連続するイベントが表示されます：hide + show）。

スニペット：

$("#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>