将鼠标悬停在子元素上时，更改父元素的颜色

Question

我有一个超级菜单，当一个悬停在父菜单上时显示drop0down菜单，当一个悬停在下拉子菜单上时，它会显示与类dd-panel

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

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

当我将鼠标悬停在图片或文字上时，我希望活动菜单的背景/前景颜色为绿色/白色。

fiddle

的链接

我尝试使用以下jquery将字体的颜色保持为黄色，以查看是否有效。但它不起作用。

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

洞的巨型菜单。我希望菜单的功能类似于现在的小提琴功能，但我希望采用更专业的编码方法。到目前为止我在堆栈用户的帮助下管理，因为我不是设计师或jquery用户的专家，我更像是一个后端开发人员。所以在这方面的任何帮助都受到高度赞赏。

更新：

当我使用$(this).parent(".dropdown ul li").css("border", "2px red solid");时，它可以正常工作，并添加了

的boredr

但是当我使用时   $(this).parent(".dropdown ul li a").css("color", "red");它正在努力

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");无效的原因。