Un uso sbagliato di ":hover" - CSS

L’hover è un selettore utilizzato nei CSS e serve per definire proprietà che saranno applicate nel momento in cui il cursore sarà posizionato sull’elemento al quale il selettore è accostato.

Potremmo sfruttare questo selettore per far si che al passaggio del mouse del testo cambi colore, un elemento si ingrandisca o si rimpicciolisca, oppure, come è logico che sia, potrebbe venirci in mente di far si che un elemento cambi l’immagine di sfondo.. Ed eccoci al problama!

Il problema..

Un errore molto comune è quello di utilizzare l’hover per cambiare il background di un elemento, e ora vi spiego il perché.

Nel momento in cui portiamo il cursore sull’elemento, il CSS deve sostituire l’immagine e quest’operazione può causare un fastidioso disturbo visivo dovuto a quell’intervallo, seppur brevissimo, in cui la nuova immagine è caricata e sostituita a quella vecchia.

Ovviamente tanto più è grande l’immagine e tanto più è fastidioso il disturbo, proprio perché si ha a che fare con un numero maggiore di kb da gestire.

Certo, si tratta di un errore spesso impercettibile, che potrebbe anche non presentarsi, ma dal momento che più di una volta mi sono trovato ad avere a che fare con questo girando tra vari siti web, ho deciso di mettermi al riparo una volta per tutte, ed ecco come.

..E la soluzione

La tecnica che utilizzo per aggirare questo problema è molto semplice e intuitiva, si tratta di giocare un po’ sull’opacità delle immagini piuttosto che sulla sostituzione dello sfondo.

Immaginiamo di avere un’immagine sopra l’altra, se io rendo trasparente l’immagine che si trova sul livello più superficiale vedrò quella che prima era nascosta.

In sintesi mi basta variare il valore di opacità nell’hover per simulare, perché in fin dei conti di una simulazione si tratta, la sostituzione dell’immagine.

Come dicevo è un metodo abbastanza intuitivo che garantisce un effetto sicuramente più fluido nonostante richieda qualche riga di codice in più!

Ecco un confronto delle due applicazioni:

DEMODOWNLOAD

Lascia un commento per far sapere la tua opinione a riguardo!