javascript - 修复 :hover pseudo class in IE11

Question

IE 有一个问题，即 :hover 伪类在打开 select 元素时无法按预期工作。一旦打开下拉菜单并将鼠标移到选项上，所有父标签就会松开 :hover 伪类。

这是因为打开的下拉菜单是作为新窗口实现的 (source)

我正在尝试通过在父元素上使用 mouseenter 和 mouseleave 事件来使用 Javascript 修复此问题，但是，不幸的是，mouseleave 也是当用户将鼠标移到打开的下拉菜单上时引发。

到目前为止我的尝试:

var container = document.getElementById("container");
var select = document.getElementById("select");

//$('#select').select2();

container.addEventListener("mouseenter", function() {
  container.classList.add("hover");
});

container.addEventListener("mouseleave", function() {
  container.classList.remove("hover");
});

#container {
  display: inline-block;
  background-color: red;
}

#container:hover,
#container.hover {
  background-color: green;
}

<div id="container">
<select id="select">
<option>Some option 1</option>
<option>Some option 2</option>
<option>Some option 3</option>
</select>
<p>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
some long text text text text text<br>
</p>
</div>

Answer 1

无论出于何种原因，在 IE11 中，mouseleave 事件都会在您的鼠标经过选择时触发(即使它包含在您正在监听的父 div 中)。尝试检查事件的“relatedTarget”属性，看看您是否正在“离开”后代的 div，或者您是否真的正在离开 div:

container.addEventListener("mouseleave", function(e) {
  if (e.relatedTarget && !container.contains(e.relatedTarget)) {
    container.classList.remove("hover");
  }
});

基本上，仅当我们要移动到的元素 1) 存在且 2) 不是我们容器的后代时才删除“悬停”类。

• 懒人:https://jsfiddle.net/q1p5gLLh/6/

• 关于“relatedTarget”:https://www.w3schools.com/jsref/event_relatedtarget.asp

• 好处:“relatedTarget”与所有主流浏览器兼容。

编辑:我们在查看“e.relatedTarget”是否包含在容器中之前检查它的原因(没有双关语意)是因为“relatedTarget”可能为空。事实上，当您将鼠标悬停在选择下拉列表上时，“relatedTarget”始终为 null。我很想知道为什么会这样，而不是在离开 HTML 主体的 div 时触发“mouseleave”，在那里您确实获得了“relatedTarget”的元素。