CSS3悬停无法更改Button图像

Question

I am completely clueless here. I have hover functions working fine on a nav menu with ul li but now I am trying to hover a single button, and after staring at my code for over 15 minutes, I do not get the clue...

This is my HTML:

<div>
      <a id="backbutton" href="services.html" title="Go back to Services">Go Back</a>
      <br />
</div>

This is my CSS3:

#backbutton {
display: block;
width: 200px;
height: 54px;
background: url('../images/BackButton.png') center center no-repeat;
text-indent: -9999px;    
}

This one above is working totally fine. Text is gone and the button displays properly. It's the below code that is not working

#backbutton a:hover {
background: url('../images/BackButtonHover.png') center center no-repeat;
width: 200px;
height: 54px;
}

The image will not replace for my targeted hover image (yes, it is uploaded on my server.)

Any clues?

Answer 1

#backbutton a:hover

to

#backbutton:hover

 #backbutton { display: block; width: 200px; height: 54px; background: url('http://wiki.openstreetmap.org/w/images/1/1c/OpenClosed.png') center center no-repeat; } #backbutton:hover { background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTiC0kOjuPsNSp7qFgKtSZyccyZZtalf58MRnztInW19zW5WV8H1g') center center no-repeat; width: 200px; height: 54px; } 

 <a id="backbutton" href="#" title="Go back to Services">Go Back</a> 

Answer 2

You are trying to assign a :hover property to a link ( a element) that is below the element with id backbutton in the hierarchy.

Instead of

#backbutton a:hover

use the selector

#backbutton:hover

and it should work. If you want to specify, that it only should affect the link with id backbutton , not any element with that id, use the selector

a#backbutton:hover