Übergang von Hintergrund-Farbe

Question

Ich versuche, einen Übergangseffekt mit Hintergrund-Farbe zu machen, wenn Menüpunkte schweben, aber es funktioniert nicht. Hier ist mein CSS-Code:

#content #nav a:hover { 
    color: black; 
    background-color: #AD310B; 
    /* Firefox */ 
    -moz-transition: all 1s ease-in; 
    /* WebKit */ 
    -webkit-transition: all 1s ease-in; 
    /* Opera */ 
    -o-transition: all 1s ease-in; 
    /* Standard */ 
    transition: all 1s ease-in; 
} 

Das #nav div ist ein Menü ul Liste der Elemente.

Answer 1

Soweit ich weiß, arbeiten Übergänge zur Zeit in Safari, Chrome, Firefox, Opera und Internet Explorer 10+.

a { 
 
    background-color: #FF0; 
 
} 
 

 
a:hover { 
 
    background-color: #AD310B; 
 
    -webkit-transition: background-color 1000ms linear; 
 
    -ms-transition: background-color 1000ms linear; 
 
    transition: background-color 1000ms linear; 
 
}

<a>Navigation Link</a>

Hinweis: Wie von Gerald in den Kommentaren, wenn Sie auf der a den Übergang setzen

Dies sollte einen Fade-Effekt für Sie in diesen Browsern produzieren Anstatt auf a:hover wird es wieder auf die ursprüngliche Farbe zurückgehen, wenn sich die Maus von der Verknüpfung entfernt.

Dies könnte nützlich sein, auch: CSS Fundamentals: CSS 3 Transitions

Answer 2

Für mich ist es besser, die die Übergangscodes mit den ursprünglichen/Minimum-Selektoren setzen als mit: schweben oder andere zusätzliche Selektoren:

#content #nav a { 
 
    background-color: #FF0; 
 
    
 
    -webkit-transition: background-color 1000ms linear; 
 
    -moz-transition: background-color 1000ms linear; 
 
    -o-transition: background-color 1000ms linear; 
 
    -ms-transition: background-color 1000ms linear; 
 
    transition: background-color 1000ms linear; 
 
} 
 

 
#content #nav a:hover { 
 
    background-color: #AD310B; 
 
}

<div id="content"> 
 
    <div id="nav"> 
 
     <a href="#link1">Link 1</a> 
 
    </div> 
 
</div>