Question

我正在尝试在其父<ul>的{{1}}事件上显示子导航<li>标记。问题是mouseover元素设置为a，因此永远不会触发display:block的{{1}}事件。

它使用jQuery工作，但我无法使用普通的javascript工作。我正在将侦听器应用于header元素，并使用li方法确定事件目标是否与hover匹配

Answer 1

如果没有代码，则必须猜测，但我的猜测是您使用mouseover和mouseout来确定悬停。 mouseout事件起泡，因此您将从mouseout的后代元素中收到li，并且错误地（我再次在这里猜测）认为光标已离开li，而不是留下li的一个后代元素。同样，当光标从li本身移动到后代元素时，li会触发mouseout。它适用于jQuery（使用hover，大概是？）因为jQuery不使用mouseover和mouseout，它使用mouseenter和mouseleave，它们更多适合这种情况。（并且它在没有本机的浏览器上模拟它们;它们最初只是IE浏览器。）

因此，如果你正在使用jQuery，显然只需使用hover。如果您不是，并且您要么未使用库，要么使用不为您模拟mouseenter和mouseleave的库，则需要检查mouseout操作中的哪个元素来自并忽略它，除非它是li本身。

如果子导航ul不会涵盖显示它的li，您可能会考虑使用仅限CSS的解决方案。例如，结构：

<ul class="mainnav"><!-- Main nav -->
  <li><!-- Nav item 1 -->
    Nav Text 1
    <ul><!-- Menu for nav item 1 -->
    ...
    </ul>
  </li>
  <li><!-- Nav item 2 -->
    Nav Text 2
    <ul><!-- Menu for nav item 2 -->
    ...
    </ul>
  </li>
</ul>

这个CSS会做到这一点（你需要的不仅仅是这个，用于定位，但这将是显示/隐藏部分）：

ul.mainnav > li > ul {
  display: none;
}
ul.mainnav > li:hover > ul {
  display: none;
}

这对IE6无效;它适用于IE7及更高版本（如果你处于标准模式）。

Answer 2

为什么不为所有子元素定义事件处理程序，然后执行

event.cancelBubble = true; //IE
event.stopPropagation(); //FF, etc

'li'鼠标悬停事件被子'a'元素显示块阻止

2 个答案: