Wie verhindert man die Deaktivierung des Hover-Effekts, wenn das Dropdown-Menü in IE aufgerufen wird?

Question

Ich habe eine einfache Website erstellt, die den Fehler in IE11 reproduziert.

Wenn ich auf der roten Registerkarte schwebe, wird der blaue Container angezeigt. Im blauen Container gibt es ein Dropdown. Wenn ich dann auf das Drop-down-Menü klicke und auf die Elemente hebe, verschwindet der blaue Container, aber das Dropdown-Menü wird weiterhin angezeigt. Ich habe versucht in Chrom, und dieser Fehler passiert nicht dort, nur IE es scheint. Ich möchte, dass der blaue Container immer noch angezeigt wird, während ich sogar auf das Dropdown-Menü gehe und auf diesen Dingen schwebe.

Kann jemand das beheben?

Dank

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.tab { 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 
.hovermenu { 
 
    display: none; 
 
    width: 100%; 
 
    height: 50vh; 
 
    background-color: cyan; 
 
    position: -ms-page; 
 
    position: fixed; 
 
} 
 
.container { 
 
    display: inline-block; 
 
} 
 
.container:hover .hovermenu { 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="tab">TAB</div> 
 
    <div class="hovermenu"> 
 
    <select> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
     <option value="5">E</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 1

fand ich heraus, wie es für den IE eine schnelle und schmutzige Art und Weise zu beheben.

 $("select").bind('focus', {}, function (event) { 
      $(this).closest(".hovermenu").css('display', 'block'); 
     }).bind('blur', {}, function (event) { 
      $(this).closest(".hovermenu").css('display', ''); 
     });