transition css menu hover

Fade Effect en Link Hover?

Question

en muchos sitios, como http://www.clearleft.com , notará que cuando los enlaces se ciernen, se desvanecen en un color diferente en lugar de cambiar inmediatamente, la acción predeterminada.

Supongo que JavaScript se usa para crear este efecto, ¿alguien sabe cómo?

Answer 1

Hoy en día las personas simplemente usan transiciones CSS3 porque es mucho más fácil que jugar con JS , el soporte del navegador es razonablemente bueno y es simplemente cosmético, así que no importa si no funciona.

Algo como esto hace el trabajo:

a {
color:blue;
/* First we need to help some browsers along for this to work.
Just because a vendor prefix is there, doesn''t mean it will
work in a browser made by that vendor either, it''s just for
future-proofing purposes I guess. */
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
/* ...and now for the proper property */
transition:.5s;
}
a:hover { color:red; }

También puede hacer la transición de propiedades de CSS específicas con diferentes tiempos y funciones de relajación separando cada declaración con una coma, como sigue:

a {
color:blue; background:white;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

Demo aquí

Answer 2

Prueba esto en tu css:

.a {
transition: color 0.3s ease-in-out;
}
.a {
color:turquoise;
}
.a:hover {
color: #454545;
}

Answer 3

Puedes hacer esto con JQueryUI:

$(''a'').mouseenter(function(){
$(this).animate({
color: ''#ff0000''
}, 1000);
}).mouseout(function(){
$(this).animate({
color: ''#000000''
}, 1000);
});

http://jsfiddle.net/dWCbk/

Answer 4

Sé en la pregunta que dices "Supongo que JavaScript se usa para crear este efecto", pero también se puede usar CSS, a continuación un ejemplo.

CSS

.fancy-link {
color: #333333;
text-decoration: none;
transition: color 0.3s linear;
-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
}
.fancy-link:hover {
color: #F44336;
}

HTML

<a class="fancy-link" href="#">My Link</a>

¡Y aquí hay un JSFIDDLE para el código anterior!

Marcel, en una de las respuestas, señala que puede "hacer una transición de múltiples propiedades de CSS", también puede usar "todo" para aplicar el elemento con todos sus estilos de desplazamiento como a continuación.

CSS

.fancy-link {
color: #333333;
text-decoration: none;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
}
.fancy-link:hover {
color: #F44336;
padding-left: 10px;
}

HTML

<a class="fancy-link" href="#">My Link</a>

¡Y aquí está un JSFIDDLE para el ejemplo "todos"!