Question

I start with the plain old way of making a button.

<div id="button">
<a href="#"><img src="button.png"></a>
</div>

After that whenever someone hovers mouse over the button the image should change but it doesn’t, relavant css is

#button a:hover
{
    background-image: url('button2.png');
}

What is wrong here ? why isn’t the image on the button being changed in response to mouse hovering.

Answer 1

if you want to do it this way you have to set a background image in the first place. The button you are building actually contains an actual image tag and not a background-image.

So possible work around: Set button.png as background-image for the button like this:

#button a
{
    background-image: url('button.png');
    height: 20px; /* set to actual height of button image */
    width: 200px; /* set to actual width of button image */
}

and then for the hover state do:

#button a:hover
{
    background-image: url('button2.png');
}

Don’t forget to set height and width of the #button a (set it to the dimensions of the image) otherwise it won’t show.