Skip navigation
Torkuda1234
Torkuda1234
Currently Being Moderated

making a link hover background

Jun 26, 2012 3:55 PM

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

611 Views   5 Replies   Latest reply: John Waller, Jun 26, 2012 9:06 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Jun 26, 2012 5:34 PM   in reply to Torkuda1234
    Report

    Use class names on the anchor <a> tags. 

    This works with CSS background-colors, background gradients or background-images.

    http://alt-web.com/DEMOS/Multi-colored-list-menu.shtml

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Torkuda1234
    Currently Being Moderated
    2. Torkuda1234,
    Jun 26, 2012 6:06 PM   in reply to Nancy O.
    Report

    I'm afraid I don't understand what your saying. Here's the code for one of the classes

     

    from the CSS

    }

    .photogallerylink {

        background-image: url(../images/photo%20link.jpg);

     

     

    from the HTML

    <ul class="nav">

            <li><a href="#" class="photogallerylink">Photo Gallery</a></li>

          </ul>

     

     

    I see no commonality between the code presented in your example and what dreamweaver is using at all.

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    3. John Waller,
    Jun 26, 2012 6:25 PM   in reply to Torkuda1234
    Report

    Are you familiar with link states?

     

    a:link

    a:visited

    a:hover

    a:active

     

     

     

    from the CSS

    }

    .nav li a:link, .nav li a:visited {

        background-image: url(../images/photo%20link.jpg);

    }

    .nav li a:hover, .nav li a:active {

        background-image: url(../images/IMAGE-ON-HOVER.jpg);

    }

     

     

    from the HTML

    <ul class="nav">

            <li><a href="#">Photo Gallery</a></li>

          </ul>

     

     

    Or do you want every single individual link to have its own unique background on hover?

     
    |
    Mark as:
  • Torkuda1234
    Currently Being Moderated
    4. Torkuda1234,
    Jun 26, 2012 6:33 PM   in reply to John Waller
    Report

    "Or do you want every single individual link to have its own unique background on hover?"

     

    Yes, that!

     
    |
    Mark as:
  • John Waller
    Currently Being Moderated
    5. John Waller,
    Jun 26, 2012 9:06 PM   in reply to Torkuda1234
    Report

    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>

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points