悬停其子元素时保留父元素的 CSS 样式
Keep CSS style of a parent element while hovering its children elements
我创建了一个带有菜单的导航,当您将鼠标悬停在某个部分时,它会显示一条蓝线。我的问题是一个部分内有一个子菜单,我希望当您将鼠标悬停在子菜单的部分(子)中时,父级仍然显示蓝线,因为它仍然悬停着。
//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');
});
如果您保持示例中的 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');
});
我创建了一个带有菜单的导航,当您将鼠标悬停在某个部分时,它会显示一条蓝线。我的问题是一个部分内有一个子菜单,我希望当您将鼠标悬停在子菜单的部分(子)中时,父级仍然显示蓝线,因为它仍然悬停着。
//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');
});
如果您保持示例中的 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');
});