Usuń WSZYSTKIE style / formatowanie z hiperłączy

157

Tworzę menu nawigacyjne ze słowami o różnych kolorach ( hreflinki). Chciałbym, aby kolor NIE zmieniał się w żadnym stanie (najechanie kursorem, odwiedzony itp.).

Wiem, jak ustawić kolory dla różnych stanów, ale chciałbym znać kod, aby po prostu pozostawić kolor tekstu (i wszelkie inne style / formatowanie) bez zmian.

Jakieś sugestie?

html css href SiteHopper
źródło

Odpowiedzi:

248

Możesz po prostu zdefiniować styl linków, który zastąpi a:hover, a:visiteditp .:

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

Możesz również użyć inheritwartości, jeśli chcesz zamiast tego użyć atrybutów ze stylów nadrzędnych:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}
Frxstrem
źródło
4
Ważną częścią jest inheritsłowo kluczowe. Niestety nie ma 100% wsparcia.
david
2
initialjest również pomocny, gdy chcesz przywrócić domyślny styl css. Jest to dobrze wyjaśnione tutaj link
SiteHopper
Dziękuję bardzo za inherit!
parsecer
@david, czy nadal stoi? Nie inheritdziała tylko w starszych przeglądarkach i Internet Explorerze lub też występują problemy w popularnych przeglądarkach (Chrome, Firefox)?
parsecer
1
Sprawdź również w stanie niezainstalowanym . >> Nieskonfigurowane słowo kluczowe CSS resetuje właściwość do jej odziedziczonej wartości, jeśli dziedziczy po swoim rodzicu, a do wartości początkowej, jeśli nie. Innymi słowy, zachowuje się jak słowo kluczowe inherit w pierwszym przypadku i jak początkowe słowo kluczowe w drugim przypadku.
JackMorrissey
4

Jak powiedział wcześniej Chris, po prostu anależy to zmienić. Na przykład:

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

W tym przypadku .nav aZAWSZE byłby zielony, a: hover nie miałby do niego zastosowania.

Jeśli wpływa na to jakaś inna reguła, MOŻESZ użyć !important, ale nie powinieneś. To zły nawyk.

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

Wtedy zawsze będzie zielony, bez znaczenia dla jakiejkolwiek innej reguły.

SpoonNZ
źródło
Nie o to prosił. Przeczytaj ponownie pytanie. On już to wie.
david
@david Przeczytałem ponownie, jestem pewien, że o to zapytał. Ten kod pozwoli mu ustawić styl, dla aktórego zapobiegnie jakimkolwiek zmianom w :hover(lub :visiteditp.). A co powiesz na to, że zamiast być kutasem i marnować wszystkie trzy odpowiedzi, sugerujesz rzeczywiste rozwiązanie?
SpoonNZ
Dzięki za pomoc. Ale co, jeśli link jest taki. 2 słowa w 2 kolorach, ale to tylko 1 link: wyjątkowa (różowa) wyprzedaż (w kolorze czarnym) I powinny pozostać w tym kolorze w każdym stanie. Zakodowałem to w tekście w ten sposób ... <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; "> sprzedaż </ span > </a> Ale musi istnieć sprzątacz. (w kodzie jest wiele takich linków) Jakieś sugestie?
SiteHopper
1

Możesz po prostu użyć aselektora w arkuszu stylów, aby zdefiniować wszystkie stany kotwicy / hiperłącza. Na przykład:

a {
    color: blue;
}

Zastępuje wszystkie style łączy i zmieni kolor na niebieski dla wszystkich stanów.

Chris
źródło
Nie o to prosił. Przeczytaj ponownie pytanie. On już to wie.
david
-1

jeśli podasz a.redLink{color:red;}to zachowaj to po najechaniu i takie dodanie a.redLink:hover{color:red;} To upewni się, że żadne inne stany najechania nie zmienią koloru twoich linków

Danferth
źródło