“li”鼠标悬停事件被儿童'a'元素显示块阻止

我正在尝试在其父母<li>的mouseover事件中显示子导航<ul>标记。问题是a元素被设置为display:block，所以li的事件永远不会被触发。“li”鼠标悬停事件被儿童'a'元素显示块阻止

它使用jQuery，但我不能让它与纯JavaScript工作。我申请听者头部元素，并使用.matchesSelector方法来确定事件是否匹配目标.nav > li;

2012-04-07 Kyle Hyde

代码是胜过千言万语。 – 2012-04-07 07:41:37

如果没有代码，就必须猜测，但我的猜测是，你正在使用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及更高版本（如果您处于标准模式）。

来源

2012-04-07 07:43:59

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

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

来源

2012-04-07 07:45:07 alexg

不起作用。当光标从“li”移动到它的子元素时，'li' *本身*会触发'mouseout'。使用'mouseover'和'mouseout'跟踪悬停比从后代取消事件复杂得多。 – 2012-04-07 07:58:12

“li”鼠标悬停事件被儿童'a'元素显示块阻止

回答

相关问题