html - CSS3 Hover 不适用于更改 Button 图像

Question

我在这里完全没有头绪。我的悬停功能在带有 ul li 的导航菜单上工作正常，但现在我试图悬停一个按钮，在盯着我的代码超过 15 分钟后，我没有得到线索......

这是我的 HTML:

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

这是我的 CSS3:

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

上面这个完全没问题。文本消失了，按钮显示正常。这是下面的代码不起作用

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

该图像不会替换我的目标悬停图像(是的，它已上传到我的服务器上。)

有什么线索吗？

Answer 1

#backbutton a:hover

到

#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>