Qual è il modo migliore di fare un rollover CSS?

Quando si imposta un effetto rollover in HTML, ci sono dei vantaggi (o delle insidie) nel farlo in CSS rispetto a JavaScript? Ci sono problemi di manutenzione o di manutenzione del codice di cui dovrei essere a conoscenza con entrambi gli approcci?

Il CSS va bene per i rollover. Sono implementati fondamentalmente usando lo pseudo-selettore :hover . Ecco un’implementazione davvero semplice:

 a{ background-image: url(non-hovered-state.png); } a:hover{ background-image: url(hovered-state.png); } 

Ci sono alcune cose che devi sapere:

  • IE6 supporta solo :hover il :hover sui tag
  • Le immagini specificate nel CSS ma non utilizzate nella pagina non verranno caricate immediatamente (il che significa che lo stato del rollover può impiegare un secondo per apparire la prima volta)

La restrizione -tags-only di solito non è un problema, in quanto tendi a volere i rollover cliccabili. Quest’ultimo tuttavia è un po ‘più un problema. C’è una tecnica chiamata CSS Sprites che può prevenire questo problema, puoi trovare un esempio della tecnica in uso per fare rollover senza preload .

È piuttosto semplice, il principio base è creare un’immagine più grande dell’elemento, impostare l’immagine come immagine di sfondo e posizionarla usando la background-position modo che solo il bit desiderato sia visibile. Ciò significa che per mostrare lo stato stazionario, è sufficiente riposizionare lo sfondo: non è necessario caricare alcun file aggiuntivo. Ecco un esempio veloce e sporco (questo esempio presuppone che tu abbia un elemento di altezza 20px e un’immagine di sfondo contenente entrambi gli stati stazionati e non stazionari, uno sopra l’altro (quindi l’immagine è alta 40px):

 a{ background-image: url(rollover-sprites.png); background-position: 0 0; /* Added for clarity */ height: 20px; } a:hover{ background-position: 0 -20px; /* move the image up 20px to show the hovered state below */ } 

Nota che l’uso di questa tecnica “sprites” significa che non sarai in grado di utilizzare PNG alpha-transparent con IE6 (in quanto l’unico modo in cui IE6 deve renderizzare correttamente i PNG alpha-transparent utilizza uno speciale filtro di immagine che non supporta la background-position )

Funzionerà ancora in CSS se il browser ha Javascript disabilitato.

Dato che è un aspetto della presentazione, direi che sono basati su standard per farlo con i CSS. Era usato in Javascript, semplicemente perché non potevamo farlo con i CSS (i vecchi browser fanno schifo, e non credo: il passaggio del mouse sia stato aggiunto fino al CSS 2).

L’implementazione di un rollover con CSS utilizza la pseudo-class: hover per definire lo stile dell’elemento di destinazione al passaggio del mouse. Funziona alla grande in molti browser ma non in IE6, dove funziona bene solo con il tag di ancoraggio (cioè a: hover). Ho usato il hover CSS per implementare una barra di navigazione a tabs, ma ho dovuto usare i comportamenti di IE per farlo funzionare in IE6.

Sì, il modo migliore per farlo è css sprites . Un problema fastidioso si verifica in IE6, quando il browser fa una richiesta ogni volta che si alza un elemento. Per risolvere questo problema, dai un’occhiata qui .

Sarei rimasto sul lato CSS della casa, ma ho fatto pochissimo Javascript.

Il CSS sembra essere più semplice da standardizzare su browser che Javascript, anche se potrebbe cambiare con l’avvento del V8 di Chrome e del nuovo strumento di rendering imminente di Firefox.

Non c’è un mnemonico per ricordare la sequenza di dichiarazioni in CSS?