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

    Navigation Menu: a:hover styling works, a.selected does not

    Hello,

    I have a simple navigation bar that I would like to change color over hover and remain that color when selected. The a:hover works great but the a.selected does not (even though the class="selected" does work for each individual page) This is how I have the list set up:

    Code:
    <ul id="kids_nav">
    <li><a class="selected'" id="maggie" href="http://asdf.com">Maggie</a></li>
    <li><a class="" id="dijon" href="http://agsdf.com">Dijon</a></li>
    <li><a class="" id="brandon"href="http://asdsdf.com">Brandon</a> </li>
    <li><a class="" id=""href="asdfg.com">Behind The Scenes</a></li>
    </ul>
    And here is most of my CSS so you can get the idea...

    Code:
    #kids_nav li a{
    	
    	font-size: 1.5em;
    	font-weight: bold;
    	color: #373737;
    	padding: 5px;
    	padding-left: 15px;
    	padding-right: 15px;
    }
    #kids_nav li a#dijon{
    	color: #00763f;
    }
    
    #kids_nav li a#dijon:hover, #kids_nav li a#dijon.selected{
    	background-color: #00763f;
    	color: #fff;
    }
    
    #kids_nav li a#brandon{
    	color: #CD5400;
    }
    
    #kids_nav li a#brandon:hover, #kids_nav li a#brandon.selected{
    	background-color: #CD5400;
    	color: #fff;
    }
    Any advice would be great! Like I said, the class=selected works on all of the pages, the hover works, but I just cant get the items to remain highlighted. Thank you in advance!

  • #2
    vjm
    vjm is offline
    New Coder
    Join Date
    Nov 2012
    Location
    PH
    Posts
    16
    Thanks
    1
    Thanked 2 Times in 2 Posts
    if the class="selected" works on all of the pages, in what exact area it doesn't work? I'm confused.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello huhnej31,
    #maggie.selected isn't right.
    Try it like this instead -
    Code:
    #kids_nav li a#maggie:hover, .selected{
    	background-color: #00763f;
    	color: #fff;
    }
    You class selected has an extra ' in your markup that is screwing things up as well.



    Here's another way of highlighting a menu item to show where you are.
    Last edited by Excavator; 12-14-2012 at 09:45 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Nov 2012
    Location
    India
    Posts
    53
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Its easy to give hover text or background colour using CSS. give perticuler background colour or text colour on mouse hover class.


  •  

    Posting Permissions

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