Wie bekomme ich mein jquery-Element nach ein paar Sekunden verschwinden nicht mehr verschwinden?

Question

Jedesmal, wenn ich in der Navigationsleiste schweben, wenn es geöffnet ist es gerade verschwindet nach einigen Sekunden, während die Maus in es ist immer noch

Ich habe alles, was ich in den <div> will.

https://jsfiddle.net/4zz1amh8

HTML:

<div id="navigation"> 
<ul> 
<li><a href="Home.html">Home</li></a> 
<li><a href="Contact.html">Contact</li></a> 
<li><a href="https://www.facebook.com/Patch-of-Blue-727128433991978">Facebook</li></a> 
<li><a href="https://plus.google.com/+PatchofBlueBlueberriesPenetanguishene">Google+</li></a> 
<li><a href="https://www.tripadvisor.ca/Attraction_Review-g678572-d7113482-Reviews-Patch_of_Blue-Penetanguishene_Ontario.html">TripAdvisor</li></a> 
<li><a href="http://www.penetang.com/blueberries">Penetang.com</li></a> 
</ul> 
</div> 
<button id="navi-button">Hover To Show Navigation Menu</button> 

CSS:

ul{ list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
    } 
    li { 
     float: left 
    } 
    li a { 
     display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
    } 
    li a:hover { 
     background-color: blue; 
    } 

    #navigation{ 
     display:none; 
     margin:10px 10px 10px 10px; 
    } 
    #navi-button{ 
     bdorer-color:none; 
     border-width:0px; 
     background-color:#333; 
     color:white; 
     font-size:20px; 
     border-radius:30px; 

jQuery:

$(document).ready(function() { 
$("#navi-button").mouseenter(function(){ 
    $("#navigation").show('fast'); 
    $("#navi-button").hide('fast'); 
}); 
$("#navigation").mouseout(function() { 
    $("#navi-button").show('slow'); 
}); 
$("#navigation").mouseout(function() { 
    $("#navigation").hide('slow'); 
}); 
}); 

Vielen Dank im Voraus :).

Answer 1

Ich denke, das ist es, was Sie wollen.

Zeigen Sie das Navigationsmenü, wenn Sie die Maus über die Schaltfläche anzeigen und die Navigation ausblenden, wenn Sie das Navigationsmenü verlassen.

$(document).ready(function() { 
 
$("#navi-button").mouseenter(function(){ 
 
    $("#navigation").show('fast'); 
 
    $("#navi-button").hide('fast'); 
 
}); 
 

 
$("#navigation").mouseleave(function() { 
 
    $("#navigation").hide('slow'); 
 
    $("#navi-button").show('slow'); 
 
}); 
 
});

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
li { 
 
    float: left 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: blue; 
 
} 
 
#navigation { 
 
    display: none; 
 
    margin: 10px 10px 10px 10px; 
 
} 
 
#navi-button { 
 
    bdorer-color: none; 
 
    border-width: 0px; 
 
    background-color: #333; 
 
    color: white; 
 
    font-size: 20px; 
 
    border-radius: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="navigation"> 
 
    <ul> 
 
    <li><a href="Home.html">Home</li></a> 
 
     <li><a href="Contact.html">Contact</li></a> 
 
     <li><a href="https://www.facebook.com/Patch-of-Blue-727128433991978">Facebook</li></a> 
 
      <li><a href="https://plus.google.com/+PatchofBlueBlueberriesPenetanguishene">Google+</li></a> 
 
      <li><a href="https://www.tripadvisor.ca/Attraction_Review-g678572-d7113482-Reviews-Patch_of_Blue-Penetanguishene_Ontario.html">TripAdvisor</li></a> 
 
       <li><a href="http://www.penetang.com/blueberries">Penetang.com</li></a> 
 
    </ul> 
 
</div> 
 
<button id="navi-button">Hover To Show Navigation Menu</button>