Link hover style active when cursor moves away

[andrewliu]

Hello,

I'm having trying implementing this...

I have a menu that drops down using jquery when a mouse hovers over it. I want to be able to set a background color on the link so when the mouse moves to the sub menus, the user will remember that the submenu goes with that link.

And when the mouse moves away from the menu, the link will be normal again.

Can someone assist me with this situation?

Thank you!

[scrappedcola]

I'm kinda answering blind here as I don't know what your html structure is like nor how you are handling the mouse events with jquery but. I would use a combination of CSS classes with the mouse events. When the mouse is in a sub menu just apply some class like "parent_selected" to the parent link that you want to change. Then just remove when you leave that subMenu.

$(".subMenu").live("mouseout",function()
{
    $("#menuContainer .parent").removeClass("parent_selected");
}).live("mouseover",function()
{
    $(this).parents(".parent").addClass("parent_selected");
});

parent_selected has the styling that you want to apply to the parent link.

[andrewliu]

hello

thank you for responding. I'm still new to jquery, and my code right now looks like this

$(function() {
				/**
				 * the menu
				 */
				var $menu = $('#ldd_menu');
				
				/**
				 * for each list element,
				 * we show the submenu when hovering and
				 */
				$menu.children('li').each(function(){
					var $this = $(this);
					var $span = $this.children('span');
					$span.data('width',$span.width());
					
					$this.bind('mouseenter',function(){
						$menu.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'backgroundColor':'black'},1000,function(){
							$this.find('.ldd_submenu').slideDown(300);
						});
					}).bind('mouseleave',function(){
						$this.find('.ldd_submenu').stop(true,true).hide();
						$span.stop().animate({'width':$span.data('width')+'px'},300);
					});
				});
            });

i tried to set an animate background color but of course it doesnt work. do u think u can help me?

thank you

[bvelez352]

that is a heavy code to something simple as a dropdown menu with slide....

$(function(){
    $('li.topLink ul').hide();
    // DROP MENU
 
    $('li.topLink').hover(function(){
        $(this).find('ul').slideDown().css({'left':left});
    },function(){
        $(this).find('ul').hide();
    });
 
});

that's how I would write a dropdown menu with hover... to add a background to the parent link just add in the first hover function

this.css({'background-color':'colorHex'});

that will make the background whatever color you want when hovers in.

and this in the second hover function

this.css({'background-color':''});

that will make the bg color the default color

[andrewliu]

OOo!!! I got it! I'm learning jquery! Thank you :)

[andrewliu]

oh and. can i just add

$(this).css({'color':'#ffffff'});

under the background color so the font color will be white if my background is black?

I tried this, but it doesnt work.

Is it supposed to? or am i doing this wrong?

Thank you

[bvelez352]

to add multiple css codes do this:

$(this).css({
'color':'white',
'background-color':'black',
});

but remember, for 'this' to work it must be inside a function after calling a selector

[andrewliu]

The background-color works wonderfully, but the text color wouldn't work. It should be able to work right?

[bvelez352]

It should, try calling it as a function.

IE

$('a.Link').click(function(){
function objCSS {
    'color':'white',
    'background-color':'black'
}
$(this).css(objCSS);

});

[andrewliu]

Sorry, i'm still new at jquery, but I'm getting an syntax error. I'm not sure how to write tie function correctly.

[bvelez352]

yes, there is a problem

$('a.Link').click(function(){
function objCSS (){
    'color':'white',
    'background-color':'black'
}
$(this).css(objCSS);

});

there... I forgot to add () after objCSS ... the () is what makes it a function

[andrewliu]

weird. i'm still getting an error? the error is on line 4 now.

[Bestwebdesign]

Hi,

This jquery code will be useful for animating the menu drop down

$(document).ready(function(){  
  
    $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
  
    $("ul.topnav li span").click(function() { //When trigger is clicked...  
  
        //Following events are applied to the subnav itself (moving subnav up and down)  
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
  
        $(this).parent().hover(function() {  
        }, function(){  
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
        });  
  
        //Following events are applied to the trigger (Hover events for the trigger)  
        }).hover(function() {  
            $(this).addClass("subhover"); //On hover over, add class "subhover"  
        }, function(){  //On Hover Out  
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
    });  
  
});