Making a link hover background

Question

I have a side navigation with six links. To each link I assinged a different class so it could have a separate background. (I used background images instead of making the links themselves into images, thus making the site easier to read for the visually impared.) Now I want to make a different background for each link upon mouse hover. What do I attach to the CSS code to do this? I know I need a compound rule, I just can't figure out what to specify to it. I'll give the line of code for one link if that helps:
.container .body .sidebar1 .nav li .videogallerylink

Answer 1

Torkuda1234 wrote:
"Or do you want every single individual link to have its own unique background on hover?"
Yes, that!
So use the technique shown in Nancy's link by applying a unique class to each link and applying the CSS
from the CSS
.nav li a.link1:link, .nav li alink1:visited {
    background-image: url(../images/photo%20link.jpg);
.nav li a.link1:hover, .nav li a.link1:active {
    background-image: url(../images/IMAGE-ON-HOVER.jpg);
.nav li a.link2:link, .nav li alink2:visited {
    background-image: url(../images/photo%20link.jpg);
.nav li a.link2:hover, .nav li a.link2:active {
    background-image: url(../images/SECOND-IMAGE-ON-HOVER.jpg);
from the HTML
<ul class="nav">
        <li><a href="#" class="link1">Photo Gallery</a></li>
        <li><a href="#" class="link2">Another link</a></li>
      </ul>