Transição da cor de fundo

286

Estou tentando fazer um efeito de transição background-colorao passar o mouse sobre os itens de 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 ullista de itens do menu .

css

— jean-guy
fonte

Apenas para sua informação, isso funciona no Firefox agora. Testado em FF9.

— C.Brown

Respostas:

526

Até onde eu sei, as transições atualmente funcionam no Safari, Chrome, Firefox, Opera e Internet Explorer 10+.

Isso deve produzir um efeito de desbotamento para você 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>

Expandir snippet

Nota: Conforme apontado por Gerald nos comentários, se você colocar a transição no a, em vez disso, a:hoverela voltará à cor original quando o mouse se afastar do link.

Isso também pode ser útil: Fundamentos do CSS: Transições do CSS 3

— Ilium
fonte

Você também pode inserir as transições content #nav apara voltar ao original quando o usuário afastar o mouse do link.

— Gak #

Mexa com transições de foco e clique em: jsfiddle.net/K5Qyx

— Dem Pilafian

Não seria melhor colocar isso transition:no não-pairar? Eu acho que cada vez que o usuário passa o mouse, a transição é compilada.

— Matej 17/14

@Illium Link is dead

— ferdynator 4/14

CSS transitionaparentemente não pode lidar com cores do tipo "gradiente linear", como pode ser testado aqui . E, a resposta da @ Ilium merece ser marcada como solução.

— Stacky

Para mim, é melhor colocar os códigos de transição com os seletores originais / mínimos do que com: hover ou qualquer outro seletor 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>

Expandir snippet

— Reza Mamun
fonte

Não é que seja melhor ou pior. Apenas se você especificar a transição no próprio elemento, ela será animada quando o elemento for pairado e quando "não pairado". Embora se você aplicá-lo ao: pairar, você terá uma animação quando o mouse entrar, mas não quando sair.

— LucasBeef

Esta solução é globalmente melhor. O efeito de transição deve e deve se esvanecer ao passar o mouse e desaparecer no desfoque.

— Chizzle