изменение фонового изображения при наведении кнопок

Question

Фон

Я пытаюсь создать меню, вы наводите курсор на кнопку, и фоновое изображение смещается в положение Y, чтобы дать вам эффект «over» для каждой кнопки.

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');}

Вопрос * * 1023 почему ни одна из этих работ не работает, если какая-то из них работает, есть ли какое-то решение, которое мне не хватает? заранее спасибо!

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, или не сделаете свое предложение наведения более конкретным.