javascript - 导航下拉圆角问题

Question

我已经在此处看到的以下导航下拉列表中工作。

它可以工作并且几乎完成，但我有一个问题。当您将鼠标悬停在导航标题上时，文本会从彩色变为黑色，然后显示下拉菜单。这就是它应该如何工作的方式，但是当您将鼠标移动到下拉菜单中的导航标题时，黑色文本（活动图像）会恢复为彩色并且不会保持黑色。

当下拉菜单处于活动状态并且用户正在浏览以保持文本（活动图像）为黑色时有什么建议吗？

Answer 1

理想情况下，您将使用文本而不是图像作为菜单项。然后，您可以非常轻松地使用 CSS 来控制鼠标悬停时的文本颜色，<li>而根本不需要 JavaScript。

以您现在的方式（带有图像），我相信通过将您的 onmouseover 和 onmouseout 从它移动<a>到它<li>上面仍然是可能的。它可能需要对脚本进行一些调整才能使其工作，但希望您了解这个概念：检测悬停在整个列表项（及其内容）上，而不是仅在该列表项中的锚标记上。

Answer 2

将菜单项及其下拉菜单项放在一个容器（可能是 div）中，该容器扩展为包含下拉菜单，然后使用一个 CSS 选择器，包括 :hover 在该容器上，向下钻取到项目文本。只要它们仍在菜单或其下拉菜单上，它仍应被悬停选择器覆盖。

Answer 3

当鼠标悬停在包含标题的 <li> 上而不是悬停在标题本身时，您可以使用 CSS 或 JS 来更改标题的颜色。