Transição do fundo-cor

Question

Transição do fundo-cor

estou a tentar fazer um efeito de transição com a cor de fundo quando pairar itens do menu, mas não funciona. Aqui está o meu código 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;
}

o #nav div é uma lista de itens do menu ul.

222

css3

Author: Veve, 2010-12-10

Source

2 answers

score 448 · Answer 1

Tanto quanto sei, as transições funcionam actualmente em Safari, Chrome, Firefox, Opera e Internet Explorer 10+.

Isto deve produzir um efeito de desvanecimento nestes navegadores:

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: tal como indicado pelo Gerald nos comentários, se colocar a transição no a, em vez de no a:hover, irá desvanecer-se para a cor original quando o seu rato se afastar da ligação.

Isto pode ser útil., too: CSS Fundamentals: CSS 3 Transitions

score 60 · Answer 2

Para mim, é melhor colocar os códigos de transição com os selectores originais/mínimos do que com o: hover ou qualquer outro selector adicional:

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