Alvarado87 Alvarado87 - 2 months ago 8
jQuery Question

Hovering parent and child at the same time

I have created a nav with a menu were whenever you hover in a section it displays a blueline. My problem is that there's a submenu inside a section and I want that when you hover in the submenu's sections (child) the parent still displays the blueline as it were still hovered.

//Display Submenu
$('nav .submenu').hover(function() {
$(this).children('ul').animate(
{'height':'toggle'}, 600, 'swing'
);
});

//Blue Line animation
$('nav ul > li a').hover(function(){
$(this).next('.blueLine').animate(
{'width':'100%'}, 200, 'linear')
},function(){
$(this).next('.blueLine').animate(
{'width':'0'}, 200, 'linear');
});


Here's a working fiddle: https://jsfiddle.net/Lhaq39d8/

Answer

If you keep HTML structure as in your example, then you can try this:

$('nav ul > li a').hover(function(){
  $(this).next('.blueLine').stop().animate(
    {'width':'100%'}, 200, 'linear');
  $(this).closest('ul').prev().stop().css('width','100%');
},function(){
  $(this).next('.blueLine').stop().animate(
    {'width':'0'}, 200, 'linear');
  $(this).closest('ul').prev().stop().animate(
    {'width':'0'}, 200, 'linear');
});

JSFiddle

Comments