在悬停子元素时保持父元素的 CSS 样式答案

【问题标题】：Keep CSS style of a parent element while hovering its children elements在悬停子元素时保持父元素的 CSS 样式
【发布时间】：2016-09-08 16:04:29
【问题描述】：

我创建了一个带有菜单的导航，当您将鼠标悬停在某个部分时，它会显示一条蓝线。我的问题是一个部分中有一个子菜单，我希望当您将鼠标悬停在子菜单的部分（子项）中时，父级仍然显示蓝线，因为它仍然悬停。

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

【问题讨论】：

标签： javascript jquery html hover jquery-hover

【解决方案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

【讨论】：