当鼠标悬停在子元素上时改变父元素的颜色

Question

我有一个超级菜单，当鼠标悬停在父菜单上时，显示drop0down菜单，当鼠标悬停在下拉菜单上时，它将显示菜单相关的信息，与类dd-panel

我改变了悬停为绿色的子菜单的背景颜色，我希望它保持绿色，如果将光标移动到该特定菜单的文本或图像上。

您还会注意到，当鼠标悬停在父菜单元素上时，我选择/显示下拉列表的第一个元素作为默认元素。

当鼠标悬停在图像或文本上时，我想要活动菜单的背景/前景颜色为白色绿色/白色。

链接fiddle

我试着用以下的jQuery的字体的颜色保持黄色FO RTEST人，看看它是否工作。但它不起作用。

$(".dd-panel").hover(function() { 
    $(this).closest("a").toggleClass("menuActive") 
}); 

孔超大菜单的视图。我希望菜单的功能类似于现在在小提琴上的功能，但我希望更专业的编码方法。我到目前为止在堆栈用户的帮助下进行了管理，因为我不是设计师或jQuery用户的专家，我更像是后端开发人员。因此，在这方面的任何帮助，高度赞赏。

UPDATE：

当我使用$(this).parent(".dropdown ul li").css("border", "2px red solid");它的工作原理，并添加的boredr各地

但是当我使用 $(this).parent(".dropdown ul li a").css("color", "red");它doent的工作

Answer 1

你<a>标签是你.dd-panel的兄弟标签，不你的父母标签。

你应该试试这个：

$(".dd-panel").hover(function() { 
    $(this).prev("a").toggleClass("menuActive"); 
}); 

这应该正确地切换你的类。

这也是为什么$(this).parent(".dropdown ul li").css("border", "2px red solid");工作和$(this).parent(".dropdown ul li a").css("color", "red");不工作的原因。