change image on link button with CSS

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?

Answers


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


Remove image on IMG tag. Write like this:

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

.buttons_position:hover {
    background-image: url(images/ask_us_hover.png);        
}

HTML

<a href="#" class="buttons_position"></a>

Check this http://jsfiddle.net/X9wCL/


try: HTML:

<a href="" class="buttons_position"></a>

CSS:

.buttons_position {
    padding: 0 0 0 10px;
    background-image: url(images/order.png);
    background-repeat: no-repeat; 
    width: 2149px;
    height: 49px;
    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;
}

it should be:

a.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;
}

your link is not inside an element with the class .button_position


Need Your Help

Making a Background Service Somewhat Like Apple's Spotlight in VIsual Studio C#

c# windows-services keyboard-shortcuts keylistener interactive

I am about to start working on an application that runs in the background waiting for a certain user input somewhat like apple's spotlight.

With Iron Router, Find() and FindOne()

meteor iron-router

I loaded Iron:Router with my Meteor, and now I'm having difficulties loading both all of a collection, and one specific entry.