22 Votos

CSS: Subrayar Enlaces sólo cuando el Cursor está sobre ellos

Pregunta de Invitado | 21/11/2023 a las 23:27

Recientemente visité un sitio web en el que el subrayado de los enlaces sólo se mostraba cuando el cursor del ratón se movía sobre ellos. Por lo demás, los enlaces se diseñaron como texto normal.

Me gusta este estilo y me gustaría aplicar un efecto similar a mi propio sitio web. ¿Alguien sabe cómo codificar esto mediante CSS o JavaScript?

ResponderPositivoNegativo
2Mejor Respuesta2 Votos

Simplemente agregue las siguientes líneas a su archivo CSS o a las definiciones de CSS de su página:

a {text-decoration:none;}
a:hover {text-decoration:underline;}

Con esto, los enlaces sólo quedarán subrayados al pasar el ratón por encima (mouse over).

Explicación: En HTML, los enlaces tienen la notación "a". Con "text-decoration: none", desactivamos el subrayado del elemento "a", para que los enlaces ya no se muestren subrayados.

El selector ":hover" significa pasar el mouse (mover el mouse sobre un elemento). Aquí, configuramos el elemento "a" en "underline". Esto establece la propiedad "text-decoration" en "underline" mientras se mueve el mouse y "none" en caso contrario.

Importante: En este contexto cabe mencionar que un usuario de una página de Internet debería poder reconocer fácilmente dónde hay un enlace y dónde no. Por este motivo, debería firmar sus enlaces de alguna otra manera (por ejemplo, por color) si no hay un signo subrayado, para que sus visitantes puedan encontrar el camino a su página de inicio.
22/11/2023 a las 15:46

ResponderPositivo Negativo
Responder

Temas Relacionados

CSS: Cómo incluir CSS en HTML

Tutorial | 0 Comentarios

MySQL: Saltos de Línea en MySQL

Consejo | 0 Comentarios

CSS: :hover para :before y :after

Pregunta | 3 Respuestas

Aviso Importante

Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.

Participar

Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.