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 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Two Styles within One Link?

    Hi,

    I'm trying to get an effect, that I'm assuming will involve CSS on my website http://odg.danbeckett.co.uk

    I am trying to get it so that the links in my right hand nav menu go from

    x. link 1
    o. link 2
    x. link 3

    to

    x. link 1
    o. link 2
    x. link 3

    when they are hovered over. I've been experimenting with css but not had much luck, can anyone help me out with this?

    Thanks - Dan.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    .first {
    color:#000;
    }
    .pink {
    color:#FF0099;
    }
    a {
    text-decoration:none;
    }
    a span.second {
    display:none;
    }
    a:hover { /*allows displays to be changed*/
    color:#000;
    }
    a:hover span.first{
    display:none;
    }
    a:hover span.second{
    display:inline;
    }
    </style>
    </head>
    
    <body>
    <a href="#">
    	<span class="first"><span class="pink">x.</span> link 1</span>
    	<span class="second">x. <span class="pink">link 1</span></span>
    </a>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Dec 2005
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks that worked a treat


  •  

    Posting Permissions

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