javascript - 显示 :none (hidden) element (chrome & opera) 上的鼠标悬停事件

Question

简而言之:当我单击与 display:none 元素重叠的选择菜单时，display:none 元素获取鼠标悬停事件。

代码总结:选择元素上方的 ul。 ul 除了 top li 之外的所有内容都显示为:无。通过 JS，当您将鼠标悬停在显示的 ul 上时，下面的 li 变为 display:block。在 mouseout 上，较低的 li 再次隐藏。 (它是您可能知道的用于导航的悬停和展开功能。)

预期行为:仅显示前几位。悬停它并显示所有 li(显示完整的 ul)。鼠标移出 ul 并隐藏除顶部 li 之外的所有内容。 (您可以在整个 ul 显示后将鼠标悬停在它周围，您不会收到 mouseout 事件。

问题:我在 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>

Answer 1

这是 Chromium 的一个问题:https://code.google.com/p/chromium/issues/detail?id=389163 .不幸的是，没有简单的解决方法。