Disabilita cambio colore del tag di ancoraggio quando visitato

Question

Devo disattivare il cambio colore del tag di ancoraggio quando visitato. Ho fatto questo:

a:visited{ color: gray } 

(Il collegamento è di colore grigio prima della visita). Ma questo è un modo in cui dichiaro esplicitamente il colore dopo che il link è stato visitato, che è di nuovo un cambiamento di colore.

Come è possibile disabilitare la modifica del colore del tag di ancoraggio durante la visita senza apportare esplicite modifiche al colore?

Answer 1

Non è possibile, è possibile solo impostare lo stato visitato.

Per le altre persone trovano questo, assicurarsi che li avete nel giusto ordine:

a {color:#FF0000;}  /* unvisited link */ 
a:visited {color:#00FF00;} /* visited link */ 
a:hover {color:#FF00FF;} /* mouse over link */ 
a:active {color:#0000FF;} /* selected link */ 

Answer 2

Eliminare il selettore o impostarlo sullo stesso colore in cui il testo viene visualizzato normalmente.

Answer 3

Per :hover per ignorare :visited, e per assicurarsi che :visited è lo stesso come il colore iniziale, :hover deve venire dopo :visited.

Quindi, se si desidera disabilitare il cambio colore, a:visited deve arrivare prima di a:hover. Come questo:

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

Per disabilitare :visited cambiamento che sarebbe lo stile con classe non pseudo:

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

Answer 4

Se si desidera solo il colore di ancoraggio per rimanere lo stesso elemento padre del ancoraggio è possibile sfruttare ereditare:

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

Avviso non c'è bisogno di ripetere la regola per ogni selettore; basta usare un elenco di selettori separati da virgole (l'ordine è importante per gli pseudo elementi di ancoraggio). Inoltre, è possibile applicare i selettori di pseudo ad una classe, se si desidera disattivare selettivamente i colori speciali di ancoraggio:

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

La tua domanda chiede solo sullo stato visitato, ma ho pensato che volevi dire tutti gli stati. È possibile rimuovere gli altri selettori se si desidera consentire modifiche di colore su tutto ma non visitato.

Answer 5

a:visited { 
    text-decoration: none; 
} 

ma interesserà solo i collegamenti su cui non è stato ancora fatto clic.

Answer 6

È possibile risolvere questo problema chiamando i selettori a:link e a:visited insieme. E seguilo con il selettore a:hover.

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