intera pagina influenzata dall'effetto hover - html, css, hyperlink, hover, visited

Come dice il titolo, ho ottenuto un effetto hover per i miei collegamenti, ma l'intera pagina è interessata per qualche motivo.

Questo è il mio stile

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/

A proposito, mentre ci sei. Il mio codice è leggibile finora? Otterresti quello che stavo facendo se dovessi continuare a costruire il sito Web? Solo per me per migliorare.

risposte:

Stai dicendo :hover tra l'altro senza elementi prima, quindi si riferisce a tutto.

Non è sufficiente selezionare il a solo nel primo selettore, se si inserisce una virgola tra le cose, vengono trattati come selettori completamente separati. Così a:hover, :hover per esempio sarebbe letto come a:hover e *:hover.

Vedere Questo per una guida su come modellare correttamente i collegamenti.

Rimuovere :hover perché sta applicando l'effetto a ogni possibile elemento, ID e classe sulla pagina. Il tuo a:hover è sufficiente e applicherà l'effetto su tutti i collegamenti al passaggio del mouse.

devi prefisso :hover , :visited ... ecc. con un tag specifico o avrà effetto su tutta la pagina.

fallo invece

 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;
}

Non puoi a:visited e a:active avere lo stesso CSS del tuo a:hover perché non funzionerà correttamente. Per questi è necessario creare un blocco separato di CSS. a:hover effettuerà tutti i tuoi elementi di collegamento, anche quelli visitati.

usate :hover 2 volte nel tuo CSS che confondono il tuo codice. dovresti ometterlo per ultimo :hover per funzionare correttamente il tuo codice