鼠标悬停事件显示:none(隐藏）元素(chrome&opera）

mouseover event on display:none (hidden) element (chrome & opera)

本文关键字：元素 chrome amp opera 隐藏 事件 悬停 显示 none 鼠标      更新时间：2023-09-26

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

代码摘要：选择元素上方的ul。ul除了top li之外，其他都是显示：没有。通过JS，当您将鼠标悬停在显示的ul上时，下li变成display:block。鼠标一出，李的下半身又被藏起来了。(这是一个悬停和展开功能，你可能知道导航。(

预期行为：仅显示顶部li。将其悬停并显示所有李的(显示完整的ul(。鼠标移出ul并隐藏除顶部li以外的所有li。(一旦整个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>

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

尝试在<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是块元素和显示元素：没有一个在窗口中消失，单击select不会进入ul的边界，除非你做了错误的布局
如果这种情况将发生在您选择的select的<option>中，则应防止select的<option>越过<ul>。

相关文章：