Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Link properties

  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Link properties

    Hi,

    I have a page

    <html>
    <head>
    <style>
    a:link{color: blue;}
    a:hover{color: red;}
    a:active{color: black;}
    a:visited{color: blue;}
    </style>
    </head>

    <body>
    <a href="http://www.yahoo.com" target="_blank">YAHOO</a>
    </body>
    </html>

    I want the link to function like this: it should be blue when the page loads, should be red when the cursor is over it, should be black when clicked, should become blue again after the link is visited, and should act like the link was unvisited so that it becomes red again when the cursor is on it and black when clicked, and so on

    how do i do that? the above code make the visited link blue , but then the link oesnt react to the link and hover proerties anymore.
    Genius has to have a starting point

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    -27° 28' 22" , 153° 1' 22"
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    All it is you need to have the link properties in the CORRECT order. Yes there is an order. They are link, visited, active, hover. I have the example below.

    <style>
    <!--
    a:link {color: darkblue;}
    a:visited {color: darkblue;}
    a:active {color: black;}
    a:hover {color: red;}
    //-->
    </style>

    Cheers...
    "Computers are considered female - As soon as you make a commitment to one, you find yourself spending half your paycheck on accessories for it."

  • #3
    New Coder
    Join Date
    Aug 2002
    Location
    Jacksonville, NC
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    JustAsking,

    Your code is helpful. I had no idea there was an order. However, even with the way you have things, there seems to be a problem:

    The code with your suggestion is
    <html>
    <head>
    <style>
    a:link {font-weight: bold; color: blue; text-decoration: none;}
    a:visited {font-weight: bold; color: blue; text-decoration: none;}
    a:active {font-weight: bold; color: green; text-decoration: none;}
    a:hover {font-weight: bold; color: red; text-decoration: none;}

    </style>
    </head>
    <body>
    <a href="http://www.yahoo.com" target="_blank">YAHOO</a><br>
    Link is blue; hover is red; visited link is blue; active link is green
    </body>
    </html>

    Initially the link is blue, when I hover over it, the link turns red. So far so good. When I click on it, the link should turn green while I have the cursor over the link with the mouse left button pressed right? The link turns green when I release the mouse button after clicking the link, and thereafter the link turns red upon hover and back to green when the cursor is not over it. Why isnt the visited property turning the link back to blue?
    Genius has to have a starting point

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    -27° 28' 22" , 153° 1' 22"
    Posts
    135
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When I click on it, the link should turn green while I have the cursor over the link with the mouse left button pressed right?
    No, the hover attribute will override the active attribute until you move off the link, so that the hover attribute is not invoked.

    Why isnt the visited property turning the link back to blue?
    I think you will find it does work. What happens is once the link is clicked the focus is still on that link. If you click anywhere else other than the link on the page after you have clicked the link, I believe you will find the link will then use the visited attribute and change to blue.
    "Computers are considered female - As soon as you make a commitment to one, you find yourself spending half your paycheck on accessories for it."


  •  

    Posting Permissions

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