hover buttons background image change not working
- by Brae
Background
I'm trying to make a menu, you hover over the button and the background image shifts its Y position to give you the 'over' effect for each button.
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>
Problem
why do none of these work?
/*** - 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;}
***/
Notes
images are 200x101px (50px high with a 1px seperator)
Question
why do none of these work, should any of them work, is there a solution im missing?
thanks in advance!
