懸停其子元素時保留父元素的CSS樣式

Question

我創建了一個帶有菜單的導航，每當您將鼠標懸停在顯示為藍線的區域中時，它就會顯示菜單。 我的問題是，一個節內有一個子菜單，我希望當您將鼠標懸停在子菜單的節（子級）中時，父級仍會顯示藍線，因為它仍處於懸停狀態。

//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');      
});

這是一個工作的小提琴

Answer 1

如果您保持示例中的HTML結構，則可以嘗試以下操作：

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