Styles for visited links problem.

Discussion in 'CSS' started by fatabbot, Jun 8, 2007.

  1. #1
    I have the following css for default links:

    a:link{
    color:#737373;
    text-decoration:none;
    }

    a:visited
    {
    text-decoration: none;
    color:#737373;

    }

    a:hover {
    color:#000000;
    text-decoration:underline;
    }


    So i want to have the visited links the same as the unvisited links. When I move the mouse over the link, i just want to underline. And it does exactly that for links i haven't clicked before. But once i visited a link, the hover (with underlining) does not work anymore on the link. The link is still a link, but it shows up as normal text and hovering it does not underline the link anymore.

    What's the problem here?
     
    fatabbot, Jun 8, 2007 IP
  2. PaulYoung

    PaulYoung Guest

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    To the best of my knowlege, there is no psuedo class :link.

    Just get rid of the :link (make it just "a") and I think it should work as expected.
     
    PaulYoung, Jun 8, 2007 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    There is a psuedo-selector called :link that works on anchors.

    There are five of them, in fact. :link :visited: hover :active :focus (they must appear in that order).

    :link is for the unvisited state
    :visited is for the visited state
    :hover is for the hover state
    :active is for the active state
    :focus is for when the link has focus

    I'll be back in a few to look at this particular problem.
     
    Dan Schulz, Jun 8, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Ok, here's what I'd do.

    Set your unvisited and visited link styles at the same time:
    
    a:link, a:visited {
        background: transparent; /* you should always specifiy a background color, just in case the user knows just enough CSS to be dangerous and breaks your layout */
        color: #737373;
        text-decoration: none;
    }
    
    Code (markup):
    Then set your hover state links:
    
    a:hover {
        background: transparent; /* see above comment about background colors */
        color: #000; /* short hand for "black" or #000000; */
        text-decoration: underline;
    }
    
    Code (markup):
     
    Dan Schulz, Jun 9, 2007 IP
  5. fatabbot

    fatabbot Well-Known Member

    Messages:
    559
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    138
    #5
    i'll give it a try. Although i don't think setting the link and visited link classes together will make any difference.
     
    fatabbot, Jun 9, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    They're not classes, but states. Since you want them both to have the same effect, giving them the same code just makes sense.

    And this is just the same as setting them both individually (it just reduces the amount of code written since it literally targets both the unvisited and visited states at the same time).
     
    Dan Schulz, Jun 9, 2007 IP