Question

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

代码摘要：选择元素上方的ul。 ul除了top li之外都有display：none。通过JS，当你将鼠标悬停在显示的ul上时，较低的li变为显示：阻止。在mouseout上，较低的li再次隐藏。（它是您可能知道的用于导航的悬停和扩展功能。）

预期行为：仅显示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>

Answer 1

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

Answer 2

尝试在<li>

中绑定onmouseover事件

<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>

我测试了你的代码但没有找到你描述的效果首先，ul是块元素和显示元素：没有在窗口中消失，单击选择将不会进入ul的边界，除非你做错了布局。
如果您选择<option>时会出现这种情况，则应阻止选择<option>获取<ul>。

显示鼠标悬停事件：无（隐藏）元素（chrome＆amp; opera）

2 个答案: