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

Question

I have some jquery that does a link menu hover effect.

My problem is that when I move the mouse to go towards the hovered (#test) div, the div hides so I never get to be able to click on the links below.

Here's the code:

//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();

});

How can I fix this problem?

Answer 1

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

Your code work fine, if you move in red border can click on links , see this :

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

but best way is use click event ,See below Example :

 $(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 3

You may use a different approach:

• hoverer: on mouseenter show test
• test: on mouseleave hide test

Adjust the dimensions of hoverer and test element so that this approach can work (ie: if you leave the div but enter in the li area you get two consecutive events: hide + show).

The snippet:

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