1

我有一个大型菜单，当一个鼠标悬停在父菜单上时显示下拉菜单，当一个鼠标悬停在下拉子菜单上时，它会在带有类的容器 div 中显示相应的菜单相关信息dd-panel

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

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

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

小提琴的链接

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

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

在洞巨型菜单的看法。我希望菜单的功能类似于它现在在小提琴上的功能，但我希望采用更专业的编码方法。到目前为止，我在堆栈用户的帮助下进行了管理，因为我不是设计师或 jquery 用户的专家，我更像是后端开发人员。因此，我们非常感谢这方面的任何帮助。

更新：

当我使用$(this).parent(".dropdown ul li").css("border", "2px red solid"); 它时，它会工作并添加周围的无聊

但是当我使用 $(this).parent(".dropdown ul li a").css("color", "red");它时，它不起作用

4

1 回答 1

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

于 2013-10-13T12:30:14.417 回答