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

时间:2013-10-13 12:14:33

标签: javascript jquery html css css3

我有一个超级菜单,当一个悬停在父菜单上时显示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");它正在努力

1 个答案:

答案 0 :(得分: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");无效的原因。