子要素をホバーしている間、親要素のCSSスタイルを維持する

Question

セクション内を移動するたびに、青い線で表示されるメニューを含むナビゲーションを作成しました。私の問題は、セクション内にサブメニューがあることです。サブメニューのセクション（子）にマウスを置くと、まだ親が青いラインを表示しています。あなたの例のようにHTMLの構造を維持した場合

//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

Answer 1

、その後、あなたはこれを試すことができます。

$('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