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 属性分配给 link（a 元素）低于层次结构中 ID 为 backbutton 的元素。

而不是

#backbutton a:hover

使用选择器

#backbutton:hover

它应该可以工作。如果你想指定，它只应该影响具有 id backbutton 的 link，而不是具有该 id 的任何元素，请使用选择器

a#backbutton:hover

CSS3 悬停按钮图像无法更改

CSS3 Hover not working for a Button image to change

html

css

hover