CSS Transition Hover Schaltfläche für Nav

Question

Ich versuche, eine Übergangsverzögerung für meine Drop-Down-Nav hinzuzufügen. Ich möchte, dass es für ungefähr 2 Sekunden verzögert wird, damit es nicht zu schnell verschwindet. Ich habe versucht,

transition: 2s ease; 

mit der Klasse .dropdown-content

.dropdown-content { 
display: none; 
position: absolute; 
right: 0; 
background-color: #f9f9f9; 
min-width: 20em; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
transition: 2s ease; 
} 
.dropdown:hover .dropdown-content { 
display: inline-block; 
} 

setzen, aber es hat keine Auswirkungen.

Um es zusammenzufassen, hier sind alle HTML und CSS, die ich benutze:

.dropbtn { 
 
    background-color: @color1; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 1.5em; 
 
    border: none; 
 
    cursor: pointer; 
 
    
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: right; 
 
    transition: 2s ease; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    background-color: #f9f9f9; 
 
    min-width: 20em; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    transition: 2s ease; 
 
} 
 

 
.dropdown-content a { 
 
    color: @darkColor; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1;} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: inline-block; 
 
    
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: @color2; 
 
}

<header> 
 
    <nav class="dropdown"> 
 
     <button class="dropbtn">=</button> 
 
     <div class="dropdown-content"> 
 
      <a href="#about">About</a> 
 
      <a href="#food_menu">Menu</a> 
 
      <a href="#map">Map</a> 
 
     </div> 
 
    </nav> 
 
</header>

Answer 1

$(function() { 
 
    $('.dropdown').hover(
 
    function() { 
 
    $('.dropdown-content').fadeIn(0); 
 
    }, 
 
    function() { 
 
     $('.dropdown-content').fadeOut(2000); 
 
    } 
 
); 
 
});

.dropbtn { 
 
    background-color: @color1; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 1.5em; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: right; 
 
    
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    background-color: #f9f9f9; 
 
    min-width: 20em; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.dropdown-content a { 
 
    color: @darkColor; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
/* display: inline-block; */ 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: @color2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<header> 
 
    <nav class="dropdown"> 
 
    <button class="dropbtn">=</button> 
 
    <div class="dropdown-content"> 
 
     <a href="#about">About</a> 
 
     <a href="#food_menu">Menu</a> 
 
     <a href="#map">Map</a> 
 
    </div> 
 
    </nav> 
 
</header>

mit Man könnte auch die Zeit von jquery Code fadein & fadeout ändern. Ich habe es auf 0ms für FadeIn und 2000ms für FadeOut geändert. Ihr Standardwert ist 400ms.

Answer 2

nur "Übergang" funktioniert nicht für alle Browser.

Ziel alle Browser von

-webkit-transition: 2s ease; 
-moz-transition: 2s ease; 
-ms-transition: 2s ease; 
-o-transition: 2s ease; 
transition: 2s ease;