顯示的mouseover事件：無（隱藏）元素（Chrome和Opera）

Question

簡而言之：當我單擊與display：none元素重疊的選擇菜單時，display：none元素將獲得鼠標懸停事件。

代碼摘要：select元素上方的ul。 ul除了top li外，幾乎沒有顯示：none。 通過JS，當您將鼠標懸停在顯示的ul上時，下li變為display：block。 移出鼠標后，小李又再次隱藏起來。 （它是您可能需要導航的懸停和擴展功能。）

預期行為：僅顯示top li。 懸停它並顯示所有li的（顯示完整的ul）。 將ul移出並隱藏除top 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 。 不幸的是，沒有容易解決的方法。

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是塊元素，而display元素：窗口中不會消失，單擊select不會輸入ul的邊界，除非您進行了錯誤的布局。
如果在選擇select的<option>會發生這種情況，則應防止select的<option>碰到<ul> 。