'李'mouseover事件被child'a'元素显示块

'li' mouseover event being prevented by child 'a' element display block

本文关键字：元素 显示 事件 mouseover child      更新时间：2023-09-26

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

它使用jQuery工作，但我无法让它使用纯javascript。我将侦听器应用于header元素，并使用.matchesSelector方法来确定事件目标是否与.nav > li; 匹配

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

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

如果没有代码，必须猜测，但我的猜测是，您使用mouseover和mouseout来确定悬停。mouseout事件冒泡，因此您将从li的子元素接收mouseout，并错误地（我在这里再次猜测）认为光标已离开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及更高版本一样有效（如果您处于标准模式）。

相关文章：