0

我试图在它的 parent 事件上显示一个子导航<ul>标签。问题是该元素设置为，因此永远不会触发'事件。<li>mouseoveradisplay:blocklihover

它使用 jQuery 工作，但我不能让它使用普通的 javascript。我将侦听器应用于标题元素，并使用该.matchesSelector方法确定事件目标是否匹配.nav > li;

4

2 回答 2

0

没有代码，人们不得不猜测，但我的猜测是您正在使用mouseover并mouseout确定悬停。事件冒泡，所以你会从 的后代元素中mouseout收到，并且错误地（我在这里再次猜测）认为光标已经离开了而不是离开了 . 的后代元素之一。同样，当光标从自身移动到后代元素时，触发 a 。它在 jQuery 中工作（使用，大概？）因为 jQuery 不使用and ，它使用andmouseoutlililililimouseouthovermouseovermouseoutmouseentermouseleave，更适合这种情况。（并且它在本机没有它们的浏览器上模拟它们；它们最初是 IE-only。）

因此，如果您使用 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 及更高版本（如果您处于标准模式）。

于 2012-04-07T07:43:59.700 回答
0

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

event.cancelBubble = true; //IE
event.stopPropagation(); //FF, etc
于 2012-04-07T07:45:07.537 回答