显示的mouseover事件：无（隐藏）元素（Chrome和Opera）

Question

In brief: display:none element gets mouseover event when i click a select menu that overlaps display:none element.

code summary: A ul above a select element. ul has all but top li as display:none. Via JS, lower li's become display:block when you mouseover the displayed ul. On mouseout, lower li's become hidden again. (Its a hover and expand feature you may know for navigation.)

Expected behavior: Show top li only. Hover it and show all li's (full ul shown). Mouseout of ul and hide all but top li. (You can mouse around whole ul once its shown and you dont get mouseout event.

Problem: I have a select dropdown right below the ul. Clicking select makes ul display. (Your cursor is now hovering the expanded ul.) This happens in chrome 36.0.1985.125 and Opera 21.0.1432.67. Does NOT happen in firefox 29.0.1. Here is the code as simple as i can make it. Click the last select option and see.

Question: What's the bug/unexpected behavior. Can i prevent this?

<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

This is an issue with Chromium: https://code.google.com/p/chromium/issues/detail?id=389163 . Unfortunately, there is no easy fix.

Answer 2

try to bind onmouseover event in <li>

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

I tested your code but not found the effect you described.
firstly,ul is block element and elements of display:none are disappeared in the window,clicking select won't enter ul's boundary unless you made wrong layout.
If this condition will happen in your choosing select's <option> ,you should prevent select's <option> get across <ul> .