悬停按钮背景图像更改不工作

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;}
***/

备注

图像为200x101px（50px高，1px分离器）

（编辑）我知道以下作品，但我不是试图这样做谎言

#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上使用的背景位置或使您的悬停子句更具体。