Hello and welcome to our community! Is this your first visit?
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
    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

    W3scools example
    <!DOCTYPE html>
    <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;}



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



    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
    Thanked 667 Times in 666 Posts
    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:
    <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;}


    Posting Permissions

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