Transizione di colore di sfondo

Question

Sto provando a eseguire un effetto di transizione con il colore di sfondo quando si passa sopra le voci di menu ma non funziona. Qui è il mio codice CSS:

#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; 
} 

Il #nav div è un menu lista ul di elementi.

Answer 1

Per quanto ne so, le transizioni funzionano attualmente in Safari, Chrome, Firefox, Opera e Internet Explorer 10+.

Questo dovrebbe produrre un effetto di dissolvenza per voi in questi browser:

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>

Nota: Come sottolineato da Gerald nei commenti, se si mette la transizione sul a invece di a:hover si dissolverà nuovamente al colore originale quando il mouse si allontana dal collegamento.

Questo potrebbe tornare utile, anche: CSS Fundamentals: CSS 3 Transitions

Answer 2

Per me, è meglio mettere i codici di transizione con i selettori originali/minimi che con il: hover o altri selettori supplementari:

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