CSS Image Sprites. Image Sprites - Efectul Hover. Selectorul :hover.

Susține Lectii-Virtuale!

Image Sprites - Efectul Hover

Acum dorim să adăugăm un efect hover în lista noastră de navigare.

Sfat: Selectorul :hover poate fi utilizat pe toate elementele, nu numai pe linkuri.

Noua noastră imagine ("img_navsprites_hover.gif") conține trei imagini de navigare și trei imagini pe care să le utilizăm pentru efectele hover:



Deoarece este vorba de o singură imagine și nu de șase fișiere separate, nu va exista nicio întârziere de încărcare atunci când un utilizator trece peste imagine.
Adăugăm doar trei linii de cod pentru a adăuga efectul de hover:

Exemplu:
 

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Exemplu explicat:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Pentru toate cele trei imagini pasive, specificăm aceeași poziție de fundal, doar 45px mai jos.