Marcos Belunti Marcos Belunti - 2 months ago 9
CSS Question

jQuery avoid toggle div from hiding when on a certain area

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

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>