在锚点上触发 jQuery 的 hover() 以显示包含 LI 的下拉菜单？答案

【问题标题】：Trigger jQuery's hover() over anchor to show drop-downs within containing LIs?在锚点上触发 jQuery 的 hover() 以显示包含 LI 的下拉菜单？
【发布时间】：2011-10-22 22:45:16
【问题描述】：

我有一个水平导航栏，它是一个带有锚标签的无序列表。它目前使用 jQuery 的悬停（鼠标悬停和鼠标悬停）在每个 LI 中显示下拉导航。

我怎样才能做到这一点，而不是在将鼠标悬停在 LI 上时触发下拉菜单，而是在将鼠标悬停在锚标记上时触发下拉菜单？当我将它更改为锚点时，下拉菜单总是在将鼠标悬停在其顶部时消失，但是当我将 LI 设置为 hover() 的目标时它工作正常（我猜是因为所有的下拉代码包裹在 LI 中，因此光标仍悬停在 LI 上）。

由于设计原因，我需要这样设置，所以没有办法改变它。我需要仅从锚点而不是 LI 触发 hover()。

【问题讨论】：

你能把代码托管在 jsfiddle 上吗？无法想象问题

标签： javascript jquery navigation hover

【解决方案1】：

您可以通过锚点的悬停代码更改 LI 的类。离开 LI 时将其改回。

【讨论】：

【解决方案2】：

如果我理解正确，您遇到的问题是下拉菜单在您将鼠标移到它之前关闭。这可能是因为锚标记和下拉菜单之间存在间隙。

那么，您将开启器更改为 a-tag，然后添加一个小计时器，即使您将鼠标移出，也可以让下拉列表保持打开一秒或多秒？无论如何，这样的添加还是不错的，如果您不小心将鼠标移出导航栏并且由于它关闭而不得不返回，则会令人恼火。

编辑：另外，是的，JSFiddle 它。

【讨论】：

【解决方案3】：

尝试在你的锚点内放置一个 span 标签：

<a href='#'><span>test</span></a>

a span {
    display: block;
}

【讨论】：