[英]Keep CSS style of a parent element while hovering its children elements
I have created a nav with a menu were whenever you hover in a section it displays a blue line. 我创建了一个带有菜单的导航,每当您将鼠标悬停在显示为蓝线的区域中时,它就会显示菜单。 My problem is that there's a submenu inside a section and I want that when you hover in the submenu's sections (child) the parent still displays the blue line as it were still hovered.
我的问题是,一个节内有一个子菜单,我希望当您将鼠标悬停在子菜单的节(子级)中时,父级仍会显示蓝线,因为它仍处于悬停状态。
//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');
});
If you keep HTML structure as in your example, then you can try this: 如果您保持示例中的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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.