Javascript 显示鼠标悬停事件：无（隐藏）元素（chrome和opera）

简言之： 当我单击与display:none元素重叠的选择菜单时，display:none元素将获取mouseover事件

代码摘要： 选择元素上方的ul。ul除了最上面的li外，其他都显示为：无。通过JS，当您将鼠标移到显示的ul上时，下li变为display:block。在mouseout上，下李再次被隐藏。（这是您可能知道的用于导航的悬停和展开功能。）

预期行为：仅显示top li。将其悬停并显示所有li（显示完整ul）。除去ul，并隐藏除上李以外的所有内容。（一旦显示整个ul，您可以在其周围进行鼠标移动，而不会出现鼠标移出事件

问题: 我在ul的正下方有一个选择下拉列表。单击选择将显示ul。（您的光标现在悬停在扩展的ul上。）这在chrome 36.0.1985.125和Opera 21.0.1432.67中发生。在firefox 29.0.1中没有发生。这是我能做的最简单的代码。单击最后一个选择选项并查看

问题：什么是错误/意外行为。我可以防止吗

<style type="text/css">
ul{
    font-size:150%;
    margin: 0px;
    padding:0px;
}
select{
    display:inline;
}
</style>

<script type="text/javascript">
function show(name1,name2,name3,name4){
    document.getElementById(name1).style.display="block";
    document.getElementById(name2).style.display="block";
    document.getElementById(name3).style.display="block";
    document.getElementById(name4).style.display="block";
}
function hide(name1,name2,name3,name4){
    document.getElementById(name1).style.display="none";
    document.getElementById(name2).style.display="none";
    document.getElementById(name3).style.display="none";
    document.getElementById(name4).style.display="none";
}
</script>

<ul onmouseover="show('id1','id2','id3','id4')" onmouseout="hide('id1','id2','id3','id4')">
    <li>asdf1</li>
    <li style="display:none" id="id1">asdf2</li>
    <li style="display:none" id="id2">asdf3</li>
    <li style="display:none" id="id3">asdf4</li>
    <li style="display:none" id="id4">asdf5</li>
</ul>
<br>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

保险商实验室{
字体大小：150%；
边际：0px；
填充：0px；
}
挑选{
显示：内联；
}
功能显示（名称1、名称2、名称3、名称4）{
document.getElementById（name1.style.display=“block”；
document.getElementById（name2.style.display=“block”；
document.getElementById（name3.style.display=“block”；
document.getElementById（name4.style.display=“block”；
}
函数隐藏（name1、name2、name3、name4）{
document.getElementById（name1.style.display=“无”；
document.getElementById（name2.style.display=“无”；
document.getElementById（name3.style.display=“无”；
document.getElementById（name4.style.display=“无”；
}

asdf1
asdf2
asdf3
asdf4
asdf5



1.
2.
3.
4.

尝试在

<ul onmouseout="hide('id1','id2','id3','id4')">
    <li onmouseover="show('id1','id2','id3','id4')">asdf1</li>
    <li style="display:none" id="id1">asdf2</li>
    <li style="display:none" id="id2">asdf3</li>
    <li style="display:none" id="id3">asdf4</li>
    <li style="display:none" id="id4">asdf5</li>
</ul>

asdf1
asdf2
asdf3
asdf4
asdf5

我测试了你的代码，但没有找到你描述的效果。
首先，ul是块元素和显示元素：窗口中没有任何元素消失，单击“选择”不会进入ul的边界，除非您做出错误的布局。

---

如果这种情况会发生在您选择select的

，您应该防止select的

越过

这是Chromium的一个问题：。不幸的是，没有简单的解决方法。

我希望ul在扩展时能够覆盖其他内容。它为复杂的导航节省空间。刚才注意到的错误只发生在第5个li。如果我删除该li，则会发生在同一区域，但ul仅会扩展一秒并返回。仍在查找…需要鼠标覆盖整个ul列表。预期行为：“鼠标在整个ul显示后环绕”[嘿，这应该有效，但对我来说不起作用]将我的确切代码粘贴到1个文件中。使用chrome查看时，请单击选择第五个li的位置。它会扩展ul.BBL。你做到了吗？我尝试了我在回答中所说的，但不会扩展ul.chrome、Firefox、Safari、Opera，甚至IE，它工作得很好，所以我希望你给出一个真实的示例。只是将ul缩短为3 li.2隐藏。现在，只有当我单击选择时才会出现错误如果是第5个li，它只会扩展一秒钟。如果我有5个li，扩展会停留，因为我的鼠标在上面。更多信息：不需要样式。在我的ul下面有一个确切的区域，当单击时（以及单击选择时）ul获得鼠标覆盖。从ul或选择列表中添加或删除li的/选项不会移动该区域。使用br将选择移动到较低位置不会移动该区域。该区域可以位于完全扩展的ul之外，在这种情况下，它会扩展一瞬间，然后获得鼠标覆盖（收回）。