如何防止在IE瀏覽器下拉時停用懸停效果？

我做了一個簡單的網站，重現IE11中的錯誤。如何防止在IE瀏覽器下拉時停用懸停效果？

當我將鼠標懸停在紅色選項卡上時，它顯示藍色容器。在藍色容器中，有一個下拉菜單。如果我然後點擊下拉菜單並將鼠標懸停在項目上，則藍色容器會消失，但下拉菜單仍會顯示。我嘗試了鉻，並且這個錯誤不會發生在那裏，只是IE似乎。我希望藍色容器仍然可以顯示，而我甚至可以繼續下拉並將鼠標懸停在這些東西上。

有誰知道如何解決這個問題？

感謝

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>

來源

2016-06-09 omega

在我看來，鉻是一個被竊聽的。我不認爲將鼠標懸停在下拉列表上應該算作懸停在列表後面的內容。 – apokryfos

@apokryfos雖然這是真的，但我認爲這是對規範的偏離，以增強Chrome團隊的功能 –

我不明白，我認爲chrome的行爲更可取，因爲它看起來更好。但無論如何，我仍然不想弄清楚如何堅持IE的背景。 – omega

我發現瞭如何解決它的IE瀏覽器快速和骯髒的方式。

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

來源

2016-06-10 16:00:23 omega

如何防止在IE瀏覽器下拉時停用懸停效果？

回答

相關問題