Question

HTML:

<a href="" class="buttons_position"><img src="images/order.png" height="49" width="214"></a>

CSS:

.buttons_position {
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

.buttons_position a:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

but on hover image is not changed. How to do this with CSS?

Answer 1

your background image is applied on hover to the a tag, and is covered by the img inside the a tag. Replace the img tag with text that you can hide (search for image replacement) and apply a different background to default and hover status of the a tag. it would be beneficial to have one single image (sprite) as a background and use background-position on hover.

image replacement: http://css-tricks.com/css-image-replacement/

background-image sprites: http://nicolasgallagher.com/css-background-image-hacks/

looking at the other answers, the correct way should be:

.buttons_position {
    background-image: url(images/order.png);
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

.buttons_position:hover {
    background-image: url(images/ask_us_hover.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    padding: 0 0 0 10px;
    border: 0px;
    margin: 0px;
}

you might also need to set display: block; and width/height attributes to .buttons_position