Przejście koloru tła

Question

Próbuję zrobić efekt przejścia w tle podczas zawieszania pozycji menu, ale to nie działa. Oto mój kod 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; 
} 

#nav div jest menu lista ul przedmiotów.

Answer 1

Z tego co wiem, przejścia działają obecnie w Safari, Chrome, Firefox, Opera i Internet Explorer 10+.

Powinno to wywołać efekt zanikania dla ciebie w tych przeglądarkach:

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>

Uwaga: Jak podkreślił Gerald w komentarzach, jeśli umieścić przejście na a , zamiast na a:hover, przywróci oryginalny kolor, gdy mysz zostanie odsunięta od łącza.

To może się przydać także: CSS Fundamentals: CSS 3 Transitions

Answer 2

Dla mnie, to lepiej umieścić kody przejścia z oryginalnymi/minimum selektorów niż z: hover lub jakichkolwiek innych dodatkowych selektorów:

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