我在这里完全没有头绪。我的悬停功能在带有 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;
}
该图像不会替换我的目标悬停图像(是的,它已上传到我的服务器上。)
有什么线索吗?
最佳答案
#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>
关于html - CSS3 Hover 不适用于更改 Button 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30245223/