Desactivar el cambio de color de la etiqueta de anclaje cuando se visita

Question 1

Tengo que deshabilitar el cambio de color de una etiqueta de anclaje cuando la visito. Hice esto:

a:visited{ color: gray }

(El enlace es de color gris antes de visitarlo). Pero esta es una forma en la que establezco explícitamente el color después de visitar el enlace, que nuevamente es un cambio de color.

¿Cómo puedo desactivar el cambio de color de una etiqueta de anclaje cuando la visito sin hacer ningún cambio de color explícito?

Question 2

No puedes. Solo puede aplicar estilo al estado visitado.

Para otras personas que encuentren esto, asegúrese de tenerlos en el orden correcto:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Question 3

Si solo desea que el color del ancla permanezca igual que el elemento principal del ancla, puede aprovechar la herencia:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Observe que no es necesario repetir la regla para cada selector; simplemente use una lista de selectores separados por comas (el orden es importante para los pseudo elementos de anclaje). Además, puede aplicar los pseudo selectores a una clase si desea deshabilitar selectivamente los colores de ancla especiales:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Su pregunta solo se refiere al estado visitado, pero asumí que se refería a todos los estados. Puede eliminar los otros selectores si desea permitir cambios de color en todos menos los visitados.

Question 4

Para :hoveranular :visitedy asegurarse de que :visitedsea el mismo que el color inicial, :hoverdebe ir después :visited.

Entonces, si desea desactivar el cambio de color, a:visiteddebe venir antes a:hover. Me gusta esto:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Para deshabilitar el :visitedcambio, lo diseñaría con una clase no pseudo:

a, a:visited { color: gray; }
a:hover { color: red; }

Question 5

Elimine el selector o configúrelo en el mismo color que el texto aparece normalmente.

Question 6

Si usa algún preprocesador como SASS, puede usar la @extendfunción:

a:visited {
  @extend a;
}

Como resultado, verá un a:visitedselector agregado automáticamente para cada estilo con aselector, así que tenga cuidado con él, porque su tabla de estilos puede aumentar mucho de tamaño.

Como compromiso, puede agregar @extend solo en aquellos bloques que realmente necesite.

Question 7

Puede resolver este problema llamando a:linky a:visitedseleccionando juntos. Y síguelo con a:hoverselector.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Question 8

Creo que si le pongo un color a:visitedno es bueno: debes conocer el color predeterminado de la etiqueta ay sincronizarlo cada vez a:visited.

No quiero saber sobre el color predeterminado (se puede configurar en common.csssu aplicación, o puede usar estilos externos).

Creo que es una buena solución:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

Question 9

a {
    color: orange !important;
}

!importanttiene el efecto de que la propiedad en cuestión no se puede anular a menos que !importantse utilice otra . En general, se considera una mala práctica a !importantmenos que sea absolutamente necesario; sin embargo, no puedo pensar en ninguna otra forma de 'deshabilitar' :visitedusando solo CSS.

Question 10

Utilizar:

a:visited {
    text-decoration: none;
}

Pero solo afectará a los enlaces en los que aún no se ha hecho clic.

Answer 1

Tengo que deshabilitar el cambio de color de una etiqueta de anclaje cuando la visito. Hice esto:

a:visited{ color: gray }

(El enlace es de color gris antes de visitarlo). Pero esta es una forma en la que establezco explícitamente el color después de visitar el enlace, que nuevamente es un cambio de color.

¿Cómo puedo desactivar el cambio de color de una etiqueta de anclaje cuando la visito sin hacer ningún cambio de color explícito?

Answer 2

105

No puedes. Solo puede aplicar estilo al estado visitado.

Para otras personas que encuentren esto, asegúrese de tenerlos en el orden correcto:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Rich Bradshaw
fuente

4

Para ser realmente anal al respecto, ¿no debería aserlo a:link?

nikc.org

1

Supongo que sí, aunque rara vez hago eso.

Rich Bradshaw

2

@ nikc.org no son anales en absoluto, a:linky noa son lo mismo. Un ancla no tiene por qué ser necesariamente un enlace. Normalmente cambia de color solo cuando contiene un enlace.

rustyx

Answer 3

4

Para ser realmente anal al respecto, ¿no debería aserlo a:link?

nikc.org

Answer 4

1

Supongo que sí, aunque rara vez hago eso.

Rich Bradshaw

Answer 5

2

@ nikc.org no son anales en absoluto, a:linky noa son lo mismo. Un ancla no tiene por qué ser necesariamente un enlace. Normalmente cambia de color solo cuando contiene un enlace.

rustyx

Answer 6

204

Si solo desea que el color del ancla permanezca igual que el elemento principal del ancla, puede aprovechar la herencia:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Observe que no es necesario repetir la regla para cada selector; simplemente use una lista de selectores separados por comas (el orden es importante para los pseudo elementos de anclaje). Además, puede aplicar los pseudo selectores a una clase si desea deshabilitar selectivamente los colores de ancla especiales:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Su pregunta solo se refiere al estado visitado, pero asumí que se refería a todos los estados. Puede eliminar los otros selectores si desea permitir cambios de color en todos menos los visitados.

Ryan
fuente

¡Esto funcionó muy bien, gracias! Como nota para los demás, es posible que tenga que agregar! Important a la etiqueta de color para que se tome correctamente dependiendo de qué más hay en su sitio web: color: heredar! Important;

Mmm

3

En Chrome, esto simplemente muestra el texto del enlace en negro.

RajV

4

¿Hay alguna manera de tener a:linkel color de los enlaces por defecto (normalmente azul) y tienen a:visitedHeredar de que, sin la codificación dura "azul" en cualquier lugar?

rustyx

Answer 7

¡Esto funcionó muy bien, gracias! Como nota para los demás, es posible que tenga que agregar! Important a la etiqueta de color para que se tome correctamente dependiendo de qué más hay en su sitio web: color: heredar! Important;

Mmm

Answer 8

3

En Chrome, esto simplemente muestra el texto del enlace en negro.

RajV

Answer 9

4

¿Hay alguna manera de tener a:linkel color de los enlaces por defecto (normalmente azul) y tienen a:visitedHeredar de que, sin la codificación dura "azul" en cualquier lugar?

rustyx

Answer 10

Para :hoveranular :visitedy asegurarse de que :visitedsea el mismo que el color inicial, :hoverdebe ir después :visited.

Entonces, si desea desactivar el cambio de color, a:visiteddebe venir antes a:hover. Me gusta esto:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Para deshabilitar el :visitedcambio, lo diseñaría con una clase no pseudo:

a, a:visited { color: gray; }
a:hover { color: red; }

Answer 11

2

¿Estoy viendo esto mal o estás haciendo exactamente lo contrario de lo que se dice en la cita? Según W3Schools es 1) a:link, a:visited2) a:hover3)a:active

Max Truxa

Answer 12

0

Elimine el selector o configúrelo en el mismo color que el texto aparece normalmente.

Kyle
fuente

Answer 13

Si usa algún preprocesador como SASS, puede usar la @extendfunción:

a:visited {
  @extend a;
}

Como resultado, verá un a:visitedselector agregado automáticamente para cada estilo con aselector, así que tenga cuidado con él, porque su tabla de estilos puede aumentar mucho de tamaño.

Como compromiso, puede agregar @extend solo en aquellos bloques que realmente necesite.

Answer 14

Puede resolver este problema llamando a:linky a:visitedseleccionando juntos. Y síguelo con a:hoverselector.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Answer 15

Creo que si le pongo un color a:visitedno es bueno: debes conocer el color predeterminado de la etiqueta ay sincronizarlo cada vez a:visited.

No quiero saber sobre el color predeterminado (se puede configurar en common.csssu aplicación, o puede usar estilos externos).

Creo que es una buena solución:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

Answer 16

¿Quién me puso menos? ¿Puedes escribir por qué lo hiciste? Por supuesto, puede usar sus colores de etiqueta A. Pero escribí si está utilizando los colores predeterminados del navegador

Smagin Alexey

Answer 17

a {
    color: orange !important;
}

!importanttiene el efecto de que la propiedad en cuestión no se puede anular a menos que !importantse utilice otra . En general, se considera una mala práctica a !importantmenos que sea absolutamente necesario; sin embargo, no puedo pensar en ninguna otra forma de 'deshabilitar' :visitedusando solo CSS.

Answer 18

-8

Utilizar:

a:visited {
    text-decoration: none;
}

Pero solo afectará a los enlaces en los que aún no se ha hecho clic.

Moliere
fuente

3

La pregunta se refería al color, no a la decoración del texto.

Bryan Green

Answer 19

3

La pregunta se refería al color, no a la decoración del texto.

Bryan Green

Desactivar el cambio de color de la etiqueta de anclaje cuando se visita

Respuestas: