Why the image not getting displayed in the background of the div??

Question

CSS file:-

 <style type="text/css">

.sprite div{
width: 728px; 
height: 243px; 
}    

.sprite 
     a:hover{ display: block; 
                    width: 728px; 
                    height: 243px; 
                    background-image: url(images/image.jpg); 
                    background-repeat: no-repeat; }
     .sp_ID1  
     {
        background-position: 0px 0px; 
     } 
    .sp_ID2
    {
         background-position: 0px -245px; 
     } 

     .sp_ID3
    {
         background-position: 0px -492px; 
     } 

     .sp_ID4
    {
         background-position: 0px -737px; 
     } 

     .sp_ID5
    {
         background-position: 0px -1000px; 
     } 

     .sp_ID6
    {
         background-position: 0px -200px; 
     } 
    </style

HTML :-

<div class="sprite>"
    <span class="sprite sp_ID1"><a href=#>Link1</a></span> <br /><br />

         <span class="sprite sp_ID2"><a href=#>Link2</a></span> <br /> <br />

         <span class="sprite sp_ID3"> <a href=#>Link3</a></span> <br /><br />

         <span class="sprite sp_ID4"> <a href=#>Link4</a></span> <br /><br />

         <span class="sprite sp_ID5"> <a href=#>Link5</a></span> <br />
</div>

The parts of images of this CSS sprite are appearing only as the background of the anchor tags..I want the parts of this CSS sprite to appear as the bground of the div..basically trying to implement rollover images using Sprites..

What I want is something like this .....Grey colored image to appear in the background when mouse is hovered over "Link1", Green colored image to appear when mouse is hovered over "Link2" and so on...plz someone tell me what am I doing wrong ? Been trying to make it work since yesterday but in vain...plz help..Thanks.

Answer 1

I think what you want to do is add :hover to each of the span classes, not to the anchor tag.

Answer 2

Happy Soul, I tried to explain this to you in the other copy of this question but got voted down when you couldn't figure it out:

.sprite a:hover has your background image.

.sp_ID1 (the same element as .sprite) is getting the image positioning, but it has no background image.

It's unclear what you really want, but there are several problems, I think you need to take a step back and try to understand what you're doing:

1. You're targeting different elements for the background image and the image positioning.
2. The a element has no dimensions or positioning until it's hovered.
3. There is no background-image on the a element until it's hovered.
4. Your added .sprite div doesn't target any elements, there is no div inside your .sprite