Сохраняйте стиль CSS родительского элемента при наведении курсора на его дочерние элементы.

Я создал навигацию с меню, в котором всякий раз, когда вы наводите курсор на раздел, отображается синяя линия. Моя проблема в том, что внутри раздела есть подменю, и я хочу, чтобы при наведении курсора на разделы подменю (дочерние) родитель по-прежнему отображал синюю линию, поскольку она все еще зависала.

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

Вот рабочая скрипка


javascript html jquery hover jquery-hover
person Alvarado87    schedule 08.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вы сохраняете структуру 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

person Artur Filipiak    schedule 08.09.2016