efecto en hover de Nav

[whiterabbit]

Buenas tardes, necesito la ayuda de alguien.
Me encomendaron un trabajo, donde me pidieron que haya un menu, en el cual el hover de cada link tenga un sombreado. Hasta ahi todo bien.

El tema es que me pidieron que ese sombreado, se vaya deslizando a medida que cambio de hover, se entiende?

Por ejemplo:

LINK1 // LINK2
-----

Las lineas vienen a representar el sombreado, y cuando el mouse se va a LINK2, que el sombreado siga al mouse, sin desaparecer en ningun momento.

Si alguien me puede dar una mano, le agradeceria un monton.

Gracias!

[pzin]

Lo habitual es hacer eso con JavaScript, ya que con CSS tendrías que indicar siempre la posición del elemento cuando está encima de uno de los enlaces.

En cualquier caso, ese sombreado no va a formar parte del enlace. Será un elemento suelto con posición absoluta que se mueve y cambia de ancho (supongo) según se interactúa con el menú.

[inazense]

Basicamente tienes que hacer dos estilos, uno para el texto cuando no estés sobre él, y otro mientras tienes el ratón encima, en este usando la propiedad text-shadow

Supon que son enlaces lo que quieres mostrar la sombra
Algo muy básico para sombrear sería lo siguiente:

Código CSS:

nav a{ /*Texto sin posicionarse encima */
    text-decoration:none; /*Quito el subrayado de los enlaces */
}
nav a:hover{ /*Texto posicionandonos encima */
    text-decoration:none;
    text-shadow: 1px 2px #999; /* Sombreo cada link del texto cuando pase por encima */
}
 

Puedes jugar con las propiedades de text-shadow para dejarlo a tu gusto, y por supuesto hacerlo bastante más bonito, esto es sólo para que pilles la idea, al menos entiendo que era esto tu duda...