[英]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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.