celá stránka ovplyvnená efektom vznášania - html, css, hyperlink, vznášať, navštívil

Ako už názov napovedá, na svoje odkazy mám vznášajúci sa efekt, ale z nejakého dôvodu je ovplyvnená celá stránka.

Toto je môj štýl

a:hover, :visited, :active, :hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}

https://jsfiddle.net/3qpbv5fo/

Mimochodom, zatiaľ čo ste na tom. Je môj kód zatiaľ čitateľný? Dostali by ste to, čo som robil, keby ste museli pokračovať vo vytváraní webovej stránky? Len pre mňa, aby som sa zlepšil.

odpovede:

Hovoríte :hover okrem iného, ​​bez toho, aby pred tým existoval, sa týka všetkého.

Nie je dostatočné vybrať a iba v prvom selektore, ak medzi veci vložíte čiarku, bude sa s nimi zaobchádzať ako s úplne samostatnými selektormi. tak a:hover, :hover napríklad sa bude čítať ako a:hover a *:hover.

vidieť toto pre návod, ako správne upravovať odkazy.

odstrániť :hover pretože aplikuje účinok na každý možný prvok, ID a triedu na stránke. tvoj a:hover je dostatočný a bude aplikovať účinok na všetky odkazy.

musíte predponu :hover , :visited ... atď. so špecifickou značkou alebo ovplyvní celú stránku.

urobte to

 a:hover
{
color:#fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
text-decoration: none;
color: #009933;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}

Nemôžete to mať a:visited a a:active mať rovnaké CSS ako vaše a:hover pretože to nebude fungovať správne. Musíte pre ne vytvoriť samostatný blok CSS. a:hover ovplyvní všetky vaše prepojovacie prvky, dokonca aj tie navštívené.

používaš :hover 2-krát vo vašom CSS, ktorý pokazil váš kód. mali by ste vynechať posledný :hover aby váš kód fungoval správne