如何防止在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浏览器下拉时停用悬停效果？

回答

相关问题