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 Coder
    Join Date
    Jun 2009
    Posts
    62
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Change background colour only working for first entry in .parents()

    Hey all,

    I'm probably doing something very silly and wrong here, but I'm having a problem highlighting items in a multi level menu using jQuery.

    I'm trying to simply make it so that any <li> parents of the element that I am hovering over are highlighted, but using `.parents()` I seem to be only able to get the first <li> to highlight.

    Firebug tells me that they are all being found, and I don't know how to solve this, so any help would be apprciated.

    Thanks.

    Code:
    /**
     * Highlighs parent elements in a menu when a child is being hovered over
     */
    $(function(){
    	
    	$('#header-nav li ul.children li').hover(function(){
    		
    		console.log($(this).parents('li'));
    		
    		/** Set the background of the parent element on 'mouseenter' */
    		$(this).css('background-color', '#0066B5');
    		$(this).parents('li').each(function(){
    			$(this).css('background-color', '#0066B5');
    		});
    		
    	}, function(){
    		
    		/** Reset the background of all matching elelments of 'mouseleave' */
    		$(this).css('background-color', '#000000');
    		$(this).parents('li').each(function(){
    			$(this).css('background-color', '#000000');
    		});
    		
    	})
    	
    });
    Last edited by Gardy; 02-01-2012 at 04:26 PM.

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    62
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Never mind, turns out this was a CSS issue and JS was actually doing what I wanted. The above code is sound.

    Thanks.


  •  

    Posting Permissions

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