Results 1 to 3 of 3

Thread: I can't figure it out a:visited a:hover ect.

  1. #1
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I can't figure it out a:visited a:hover ect.

    This is what i'm trying to do Links should be blue when unvisited, purple when visited, and black when hovered over and active. They should also show an underline overline appearance when hovered over and active.
    Below is what I have. I've tried adding div & classs. I guess I don't understand how class or id works. The only thing I cqan get to work is the hover. If someone could help point me in the right direction I'd be thankful.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Client-Side Web Development Languages</title>
    <style type="text/css"><!--
    body {font-size: 12px;font-family: verdana,geneva,lucida,arial,sans-serif;line-height: 1.5;}
    h1 {font-size: 20px; font-family: verdana,geneva,lucida,arial,sans-serif; font-size: 2px letter-spacing: normal; font-variant: small-caps; }
    h2 {font-size: 16px; font-family: letter-spacing: 1px; font-weight: normal;}
    p em {font-styleblique; font-weight: bold;text-indent: 20px;}
    #onlynav a:link {color:blue; } /* for unvisited links */
    #onlynav a:visited {colorurple; } /* for visited links */
    #onlynav a:active {color: red; } /* when link is clicked */
    #onlynav a:hover {color: black; text-decoration: overline underline;}} /* when mouse is over link */
    --></style

    </head>
    <body>

    <h1>Client-Side Web Development Languages </h1>
    <p>Client-side languages for web development include:</p>

    <ul id="onlynav">
    <li><a href="#xhtml">HTML / XHTML</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#js">Javascript</a></li>
    </ul>
    <h2 id="xhtml">HTML / XHTML </h2>
    <p><em>Usage:</em> HTML / XHTML are the structural markup languages in use on the Web.</p>
    and XHTML.</p>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The order of your link styles needs to change. Hover has to come before active, else they act buggy.

    #onlynav a:link {color:blue; } /* for unvisited links */
    #onlynav a:visited {colorurple; } /* for visited links */
    #onlynav a:hover {color: black; text-decoration: overline underline;} /* when mouse is over link */
    #onlynav a:active {color: red; } /* when link is clicked */

    Also, you've got an extra bracket at the end, plus you need to close your </style> tag

  3. #3
    Join Date
    Mar 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks you don't much

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •