Question

我创建了一个简单的网站来重现IE11中的错误。

当我将鼠标悬停在红色标签上时，它会显示蓝色容器。在蓝色容器中，有一个下拉列表。如果我然后单击下拉列表并将鼠标悬停在项目上，蓝色容器将消失，但下拉菜单仍会显示。我尝试使用chrome，这个bug不会发生在那里，只是IE似乎。我希望蓝色容器仍然显示，而我甚至继续下拉并悬停在那些东西上。

有谁知道如何解决这个问题？

由于

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我发现如何为IE修复它快速而肮脏的方式。

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

如何防止在IE中进行下拉菜单时禁用悬停效果？

1 个答案: