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 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Nav Links problem - Solve with jQuery or css?

    Hi!
    I'm working on a website design where I have a horizontal dropdown menu.

    When an item is hovered I want it's text and background to change color.
    Sounds simple.
    Here's my markup:

    Code:
    <div id="nav-bar">
    	<li class="nav-link"><a href="#" class="">Home</a></li>
    	<li class="nav-link"><a href="#" class="">About</a></li>
    	<li class="nav-link"><a href="#" class="">Categories</a></li>
    	<li class="nav-link"><a href="#" class="">Contact Us</a></li>
    </div>
    The problem is that when I hover over the button the text doesnt change, cause it is controlled by li.nav-link a:hover.
    Therefore you need to hover over the actual text.

    So when you hover over the buttons edge and not the text itself the text is the same while the background is changed.

    Should I fix this with Jquery (and how would that code look like, I'm not very good at jQuery) Or is there some simple problem-solving CSS-Code I've missed?

    Thankyou
    //Will

  • #2
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    This might work for you:

    Code:
    <div id="nav-bar">
    	<li class="nav-link"><a href="#" class="" onmouseover="ChangeColor(this)" onmouseout="RestoreDefault(this)">Home</a></li>
    	<li class="nav-link"><a href="#" class="" onmouseover="ChangeColor(this)" onmouseout="RestoreDefault(this)">About</a></li>
    	<li class="nav-link"><a href="#" class="" onmouseover="ChangeColor(this)" onmouseout="RestoreDefault(this)">Categories</a></li>
    	<li class="nav-link"><a href="#" class="" onmouseover="ChangeColor(this)" onmouseout="RestoreDefault(this)">Contact Us</a></li>
    </div>
    
    
    <script type="text/javascript">
    function ChangeColor(d) {
    d.style.color = "white";
    d.style.backgroundColor = "blue";
    }
    
    function RestoreDefault(d) {
    d.style.color = "black";
    d.style.backgroundColor = "white";
    }
    </script>
    Will

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for your reply.
    However, this sulotion wont work.
    I need to say:
    When this li is hovered, style the nested a.

    How do i do that in jQuery?

  • #4
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Quote Originally Posted by LimeX View Post
    Or is there some simple problem-solving CSS-Code I've missed?
    Could you please post the css ?
    You juste have to choose the right selector and it supposed to work...

    Something like that:

    Code:
    li.nav-link:hover a {color:red;}
    You may have a selector's specificty problem, hard to say not seeing your entire css
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    LimeX (06-10-2012)

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    25
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Candygirl View Post
    Could you please post the css ?
    You juste have to choose the right selector and it supposed to work...

    Something like that:

    Code:
    li.nav-link:hover a {color:red;}
    You may have a selector's specificty problem, hard to say not seeing your entire css
    It was that simple. I will never be able to call myself a webdesigner or say i know css anymore. That was just.. How did I miss that?
    FML.

    Thank you.


  •  

    Posting Permissions

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