Question

IE存在一个问题，即:hover伪类在有一个开放的select元素时无法按预期工作。只要下拉列表打开并且鼠标移动到选项上，所有父标签就会松开:hover伪类。

这是因为开放下拉列表是作为新窗口实现的（source）

我试图通过在父元素上使用mouseenter和mouseleave事件来解决这个问题，但不幸的是，当用户将鼠标移到鼠标元素上时，也会引发mouseleave打开下拉列表。

到目前为止我的尝试：

＆＃13;

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

＆＃13;

#container {
  display: inline-block;
  background-color: red;
}

#container:hover,
#container.hover {
  background-color: green;
}

＆＃13;

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

＆＃13;

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）不是我们容器的后代时才删除“hover”类。

对于懒惰：https://jsfiddle.net/q1p5gLLh/6/
关于“relatedTarget”：https://www.w3schools.com/jsref/event_relatedtarget.asp
奖励：“relatedTarget”与所有主流浏览器兼容。

编辑：我们检查“e.relatedTarget”之前查看它是否包含在容器中（没有双关语）的原因是因为它可能是“relatedTarget”为null。事实上，当您将鼠标悬停在选择下拉列表上时，“relatedTarget”始终为null。我有兴趣知道为什么会出现这种情况，而不是在离开HTML主体的div时触发“mouseleave”，在那里你会获得“relatedTarget”的元素。

修复：在IE11中悬停伪类

1 个答案: