Eliminar TODO estilo / formato de hipervínculos

157

Estoy creando un menú de navegación con palabras con diferentes colores ( hrefenlaces). Me gustaría que el color NO cambie en ningún estado (pase el mouse, visite, etc.).

Sé cómo configurar los colores para los diferentes estados, pero me gustaría saber el código para dejar el color del texto (y cualquier otro estilo / formato) tal como está.

¿Alguna sugerencia?

html css href SiteHopper
fuente

Respuestas:

249

Simplemente puede definir un estilo para los enlaces, que anularía a:hover, a:visitedetc.

a {
  color: blue;
  text-decoration: none; /* no underline */
}

También puede usar el inheritvalor si desea usar atributos de estilos primarios en su lugar:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
Frxstrem
fuente
44
La parte importante es la inheritpalabra clave. Desafortunadamente, no tiene soporte 100%.
David
2
initialTambién es útil cuando desea restablecer CSS al estilo predeterminado. Esto está bien explicado aquí enlace
SiteHopper
Muchas gracias por inherit!
analizador
@ David, ¿sigue en pie? ¿ inheritNo funciona solo en los navegadores antiguos e Internet Explorer o también existen dificultades en los navegadores populares (Chrome, Firefox)?
analizador
1
Echa un vistazo sin configurar también. >> La palabra clave CSS no establecida restablece una propiedad a su valor heredado si hereda de su padre y a su valor inicial si no. En otras palabras, se comporta como la palabra clave heredar en el primer caso, y como la palabra clave inicial en el segundo caso.
JackMorrissey
4

Como Chris dijo antes que yo, solo adebería anular. Por ejemplo:

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

En este caso .nav a, SIEMPRE sería verde, el: hover no se aplicaría a él.

Si hay alguna otra regla que lo afecte, PODRÍAS usarlo !important, pero no deberías. Es un mal hábito caer en.

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

Entonces siempre será verde, irrelevante de cualquier otra regla.

SpoonNZ
fuente
Esto no es lo que pidió. Vuelve a leer la pregunta. Él ya lo sabe.
David
@david He vuelto a leer, bastante seguro de que eso es lo que pidió. Este código le permitirá establecer un estilo para el acual evitará cualquier cambio en :hover(o :visitedetc.). ¿Qué tal en lugar de ser un imbécil y descartar las tres respuestas, sugiere una solución real?
SpoonNZ
Gracias por la ayuda. Pero, ¿y si el enlace es así? 2 palabras en 2 colores, pero es solo 1 enlace: ventas únicas (en rosa) (en negro) Y deben mantener ese color en cualquier estado. Lo codifiqué en línea de esta manera ... <a href="#" style="text-decoration: none" target="_blank"> <span style = "font-family: Arial; font-size: 13px; color: # e91974; font-weight: lighter; "> unique </span> <span style =" font-family: Arial; font-size: 13px; color: # 020202; font-weight: lighter; "> sales </ span > </a> Pero debe haber un limpiador. (hay muchos enlaces como este en el código) ¿Alguna sugerencia?
SiteHopper
1

Puede usar un aselector en su hoja de estilo para definir todos los estados de un ancla / hipervínculo. Por ejemplo:

a {
    color: blue;
}

Anularía todos los estilos de enlace y haría que todos los estados fueran de color azul.

Chris
fuente
Esto no es lo que pidió. Vuelve a leer la pregunta. Él ya lo sabe.
David
-1

si indica que a.redLink{color:red;}debe mantener esto al pasar el mouse y agregar a.redLink:hover{color:red;} esto Esto asegurará que ningún otro estado pase el mouse cambiará el color de sus enlaces

Danferth
fuente