CODEWITHSUNDEEP
cssspritecss-sprites
ncrocfer
ncrocfer

Reputation: 2570

Using CSS sprite on two images both

I'm using this html code for my buttons :

<a id="my-button" class="btn" name="my-button" href="#">
<span>Some text</span>
</a>

My button is actually composed of two images defined in CSS (i'm using sprites CSS):

.btn {
    background-image: url(images/btn-left.png);
}

.btn:hover {
    background-position:0 -27px;
}

.btn span {
    background-image: url(images/btn-right.png);
}

.btn span:hover {
    background-position:0 -27px;
}

I can put text of any size in the span. When I'm over the span, the left and the right button are modified, but when i'm just hover the a tag (a few pixels image) there is just the left button is changed, not the right...

How to change the span style when I'm hover the a tag please ?

Upvotes: 0

Views: 287

Answers (2)

Gerico
Gerico

Reputation: 5179

I'm not sure why you need to have the span? Why not use one sprite image so you only need to load one image and have something like: 

<a class="btn" name="my-button" href="#">
Some text
</a>

and use CSS to process the hover state. 

.btn {
   width: xxx;
   height: xxx;
   background-image: url(images/btn-left.png);
   background-position:top; /* use one long image with both states for active and    hover */
   display:block;
}
.btn:hover {
  background-position:bottom; /* moves the image down on hover to the lower part of the image */
}

I've made a little example, obviously just using color instead of image. Check it out: http://jsfiddle.net/kkj8n/

Just switch background color to image and use background-position to operate the change in position.

Upvotes: 1

sandeep
sandeep

Reputation: 92843

write like this:

.btn:hover {
    background-position:0 -27px;
}
.btn:hover span{
    background-position:0 -27px;
}

OR

If background position is same then write like this:

.btn:hover, .btn:hover span {
        background-position:0 -27px;
    }

Upvotes: 0

Related Questions