Rimuovere TUTTO lo stile / la formattazione dai collegamenti ipertestuali


157

Sto creando un menu di navigazione con parole con colori diversi ( hrefcollegamenti). Vorrei che il colore NON cambi in qualsiasi stato (hover, visitato ecc.).

So come impostare i colori per i diversi stati, ma vorrei sapere il codice per lasciare il colore del testo (e qualsiasi altro stile / formattazione) così com'è.

Eventuali suggerimenti?

Risposte:


249

Puoi semplicemente definire uno stile per i collegamenti, che avrebbe la precedenza a:hover, a:visitedecc .:

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

È inoltre possibile utilizzare il inheritvalore se si desidera utilizzare invece gli attributi degli stili parent:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

4
La parte importante è la inheritparola chiave. Sfortunatamente non ha il 100% di supporto.
David,

2
initialè utile anche quando si desidera ripristinare il CSS allo stile predefinito. Questo è ben spiegato qui link
SiteHopper

Grazie mille per inherit!
parsecer

@david, resiste ancora? Non inheritfunziona solo nei browser antichi e in Internet Explorer o ci sono difficoltà anche nei browser più diffusi (Chrome, Firefox)?
parsecer

1
Guarda anche unset . >> La parola chiave CSS non impostata reimposta una proprietà al suo valore ereditato se eredita dal suo genitore e al suo valore iniziale in caso contrario. In altre parole, si comporta come la parola chiave eredita nel primo caso e come la parola chiave iniziale nel secondo caso.
JackMorrissey,

4

Come Chris ha detto prima di me, adovrebbe solo scavalcare. Per esempio:

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

In questo caso il .nav aSEMPRE sarebbe SEMPRE verde, il: hover non si applica ad esso.

Se ci sono altre regole che lo riguardano, POTREBBE usare !important, ma non dovresti. È una cattiva abitudine cadere.

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

Quindi sarà sempre verde, irrilevante rispetto a qualsiasi altra regola.


Non è quello che ha chiesto. Rileggi la domanda. Lo sa già.
david

@david Ho riletto, abbastanza sicuro che sia quello che mi ha chiesto. Questo codice gli consentirà di impostare uno stile per il aquale impedire eventuali modifiche :hover(o :visitedecc.). Che ne dici invece di essere un coglione e spazzare tutte e tre le risposte che suggerisci una soluzione reale?
SpoonNZ,

Grazie per l'aiuto. E se il link fosse così. 2 parole in 2 colori, ma è solo 1 link: vendite uniche (in rosa) (in nero) E dovrebbero rimanere quel colore in qualsiasi stato. L'ho codificato in linea in questo modo ... <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; dimensione carattere: 13px; colore: # 020202; font-weight: più leggero; "> sales </ span > </a> Ma deve esserci un pulitore. (là dove molti link come questo nel codice) Qualche suggerimento?
SiteHopper

1

Puoi semplicemente usare un aselettore nel tuo foglio di stile per definire tutti gli stati di un ancoraggio / collegamento ipertestuale. Per esempio:

a {
    color: blue;
}

Sostituirebbe tutti gli stili di collegamento e renderebbe tutti gli stati di colore blu.


Non è quello che ha chiesto. Rileggi la domanda. Lo sa già.
David,

-1

se dichiari a.redLink{color:red;}quindi di tenerlo al passaggio del mouse e tale aggiunta a.redLink:hover{color:red;} Ciò assicurerà che nessun altro stato al passaggio del mouse cambierà il colore dei tuoi collegamenti

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.