CSS Roll over image buttons?

Question

I'm trying to switch this code to do roll over image buttons instead of just roll over color changing, but I can't get it to work =[

CSS file has this:
#navcontainer {
width: 200px;
}
#navcontainer ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#navcontainer a{
display: block;
padding: 3px;
width: 160px;
background: url('homebutton.png');
border-bottom: 1px solid #EEE;
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
#navcontainer a:hover {
background: url('LOVEU.jpg');
color: #FFF;
}

HTML file has this:

• 


• About


• Multimedia


• Lyrics


• Links


• Item even

3 answers

Try this:

#navcontainer a{
display: block;
padding: 3px;
width: 160px;
border-bottom: 1px solid #EEE;
text-decoration: none;
background: url('homebutton.png');
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
}
#navcontainer a:hover {
background-image: url('LOVEU.jpg');
color: #FFF;
}

Edit: You might want to try this technique for positioning a single image to get 2 or 3 hover states - http://www.wellstyled.com/css-nopreload-rollovers.html

Instead of applying the style containing the background image apply it to the div.

An anchor does not support background images iirc.

In CSS, use the :hover pseudo-class in your selector for your target element .button { // properties for button in normal state } .button:hover { // properties for button when hovered over } Read more about it at the source link

Answer 1

Try this:

#navcontainer a{
display: block;
padding: 3px;
width: 160px;
border-bottom: 1px solid #EEE;
text-decoration: none;
background: url('homebutton.png');
}
#navcontainer a:link, #navlist a:visited {
color: #EEE;
}
#navcontainer a:hover {
background-image: url('LOVEU.jpg');
color: #FFF;
}

Edit: You might want to try this technique for positioning a single image to get 2 or 3 hover states - http://www.wellstyled.com/css-nopreload-rollovers.html

Answer 2

Instead of applying the style containing the background image apply it to the div.

An anchor does not support background images iirc.

Answer 3

In CSS, use the :hover pseudo-class in your selector for your target element .button { // properties for button in normal state } .button:hover { // properties for button when hovered over } Read more about it at the source link