Results 1 to 5 of 5

Thread: the link underline

  1. #1
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default the link underline

    hi,

    I want to have a link without underline (of course this part is easy in css)
    and onMouseOver I want the link to have an underline with a color that is different from the link color.

    how can I do it?

    thanks again

  2. #2
    Join Date
    Jun 2006
    Posts
    182
    Thanks
    0
    Thanked 14 Times in 14 Posts

    Default

    You could either use a border:
    Code:
    a {
        color: blue;
        text-decoration: none;
    }
    
    a:hover {
        border-bottom: 1px solid lime;
    }
    or a nested element to override the color of the link:
    Code:
    a {
        color: lime;
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: underline;
    }
    
    span.link {
        color: blue;
    }
    HTML Code:
    <a href="#"><span class="link">Link</span></a>

  3. The Following User Says Thank You to DimX For This Useful Post:

    d-machine (07-05-2008)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You may need to get more elaborate, depending upon the other styles on your page, layout, etc. But here is a basic method:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    a {
    text-decoration:none;
    padding-bottom:1px;
    color:green;
    display:inline-block;
    }
    a:hover {
    color:green;
    padding-bottom:0;
    border-bottom:1px solid red;
    }
    </style>
    </head>
    <body>
    <a href="#">Test</a>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    d-machine (07-05-2008)

  6. #4
    Join Date
    Nov 2007
    Posts
    151
    Thanks
    67
    Thanked 0 Times in 0 Posts

    Default

    Thank you both
    it was so quicky!

  7. #5
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Agreed with DimX.

    Code:
    <style type="text/css"> a { text-decoration:none; } </style>
    I create links a different and more fun way with JavaScript. Observe:

    Code:
    <script language="JavaScript">
    function red(obj,url)
    {
    obj.style.color="red";
    window.status = url;
    }
    
    function blue(obj)
    {
    obj.style.color="blue";
    window.status = "";
    }
    </script>
    <body>
    <span style="color:blue;cursor:hand;" onmouseover="red(this,'http://www.w3schools.com/')" onmouseout="blue(this)" onclick="location.href='http://www.w3schools.com/';">W3Schools</span>
    </body>
    -magicyte
    Last edited by magicyte; 07-08-2008 at 01:43 AM. Reason: Error in Script

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
  •