CSS3悬停无法更改按钮图像

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>

Answer 2

您正试图将:hover属性分配给链接(a元素(，该链接位于层次结构中id为backbutton的元素下方。

代替

#backbutton a:hover

使用选择

#backbutton:hover

它应该起作用。如果您想指定，它应该只影响id为backbutton的链接，而不是任何id为的元素，请使用选择器

a#backbutton:hover