I’m trying to use a hover effect on a one-button nav bar using the navigation matrix method, and I’m having trouble.
My <div> container for the button is absolutely positioned, and I simply want the button to be a link that changes states on :hover from the top section to the bottom of my background-image (image attached). I’ve done this for entire navigation menus using a <ul>, but never on a single, absolutely positioned <div>. This seems like it should be much simpler, but I can’t seem to figure it out. Can anyone slap me into shape?
Code:
#button-container {
width: 82px;
height: 109px;
position: absolute;
left: 688px;
top: 541px;
z-index:2;
background: url(images/serious_btn.jpg) no-repeat;
overflow: hidden;
font-size: 1%;
}
#button-container span a {
width: 82px;
left: 0;
background: url(images/serious_btn.jpg) no-repeat;
background-position: 0 0;
}
#button-container span a:hover {
background-position: 0 -109px;
}
My CSS is kind of a mess because I’ve tried a bunch of combinations — this is where I left off.
The size of my background image is 82px X 218px, and the :hover section starts at the 109px height.