css - 悬停按钮背景图像更改不起作用

Question

背景

我正在尝试制作一个菜单，您将鼠标悬停在按钮上，背景图像会移动其 Y 位置，为您提供每个按钮的“结束”效果。

CSS

.menu {float: left;}
.menu span {display: none;}
.menu a {display: block; margin: 10px; width: 200px; height: 50px;}
#itemA {background: url('images/btnA.png') no-repeat 0 0;}
#itemB {background: url('images/btnB.png') no-repeat 0 0;}
#itemC {background: url('images/btnC.png') no-repeat 0 0;}
#itemD {background: url('images/btnD.png') no-repeat 0 0;}

HTML

<div class="menu">
<a id="itemA" href="#"><span>AAAAA</span></a>
<a id="itemB" href="#"><span>BBBBB</span></a>
<a id="itemC" href="#"><span>CCCCC</span></a>
<a id="itemD" href="#"><span>DDDDD</span></a>
</div>

问题

为什么这些都不起作用？

/*** - test A     
a.menu:link {background-position: 0 -51px;}
a.menu:visited {display: block; margin: 10px; width: 200px; height: 32px;}
***/

/*** - test B     
a.menu:hover {background-position: 0 -51px;}
***/

/*** - test C    
.menu a:hover {background-position: 0 -51px;}
***/

/*** - test D     
.menu:hover a {background-position: 0 -51px;}
***/

/*** - test E     
a:hover .menu {background-position: 0 -51px;}
***/

注意事项

图像为 200x101 像素(50 像素高，1 像素分隔符)

(edit) 我知道以下作品，但我并不想那样做

#itemA {background-image: url('images/btnA.png');}
#itemB {background-image: url('images/btnB.png');}
#itemC {background-image: url('images/btnC.png');}
#itemD {background-image: url('images/btnD.png');}

问题

为什么这些都不起作用，它们中的任何一个都应该起作用，我缺少解决方案吗？

提前致谢!

Answer 1

改用background-image:

#itemA {background-image: url('images/btnA.png');}
#itemB {background-image: url('images/btnB.png');}
#itemC {background-image: url('images/btnC.png');}
#itemD {background-image: url('images/btnD.png');}

或者改变你的悬停:

#itemA:hover, #itemB:hover, #itemC:hover, #itemD:hover {
    background-position: 0 -51px;
}

您的代码的问题在于 #itemA 比 .menu a.menu:hover 或您测试中的任何其他组合更具体。因此，即使您指定了悬停效果，浏览器也会忽略它，除非您删除在 background 上使用的背景位置或使悬停子句更具体。