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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stop links from changing anything pass the first links

    I'm new at this. I have a site that has a bar like googles. When i mouse over it changes from grey to white. But I don't want it to continue pass the header bar. Like google when you go to the bar on the side it stays black when you rollover. I don't know how to do this. I got onto w3schools site and they gave me their code but it dosn't work..

    Google Example
    http://www.google.com/search?client=...UTF-8&oe=UTF-8

    W3scools example
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    a.ex1:hover,a.ex1:active {color:a4a4a4;}
    a.ex1:hover,a.ex1:color {background:a4a4a4;}
    a.ex1:visited,a.ex1:hover {text-decoration:none;}
    a.ex1:hover,a.ex1:visited {text-decoration:none;}



    a.ex2:hover,a.ex2:active {color:000000;}
    a.ex2:hover,a.ex2:color {background:000000;}
    a.ex2:visited,a.ex2:hover {text-decoration:none;}
    a.ex2:hover,a.ex2:visited {text-decoration:none;}


    </style>
    </head>

    <body>


    <p><a class="ex1" href="default.asp">This link 1</a></p>
    <p><a class="ex2" href="default.asp">This link 2</a></p>

    </body>

    </html>



    I don't get it. When I roll over it it all still turns purple and with the line below it..

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,762
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Code:
    a.ex1:hover,a.ex1:active {color:a4a4a4;}
    a.ex1:hover,a.ex1:color {background:a4a4a4;}
    a.ex1:visited,a.ex1:hover {text-decoration:none;}
    a.ex1:hover,a.ex1:visited {text-decoration:none;}
    You are declaring your hover four times! Why?
    If you make the color and the background the same you just get a block with no writing.
    Next: the hex color number should be prefaced by the # sign
    And last: There is an order for the pseudo-classes. See http://www.w3schools.com/css/css_pseudo_classes.asp

    Use this as a start and get it the way you want it:
    Code:
    <style type="text/css">
    a.ex1:visited {text-decoration:none;}
    a.ex1:hover {background:#a4a4a4;text-decoration:none;}
    a.ex1:active {color:#a4a4a4;}
    
    a.ex2:visited {text-decoration:none;}
    a.ex2:hover {color:#000000;}
    a.ex2:active {color:#000000;}
    </style>


  •  

    Posting Permissions

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