I am learning CSS and found an example from http://www.w3schools.com/css/css_image_sprites.asp which confused me.
from that example (Hover Effect), I know that is one single image. I tried to understand the code:
#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;}
where -45px is used for background position. In my understanding, the single image has 6 images with 2 rows(top row is navigation images and bottom row is for hover effects. but why I can only see navigation?
question 1(use home as example): if the navigation image and hover effect image are overlap, and then you move mouse there, it switches, like the try it yourself at (Go to the complete details ...