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
2 answers
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.
448
Author: Ilium, 2017-01-11 22:08:59
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>
60
Author: Reza Mamun, 2017-01-11 22:19:46