Javascript 修复：在IE11中悬停伪类

IE遇到的问题是，当存在打开的

select

元素时，

：hover

伪类无法正常工作。一旦下拉列表打开并且鼠标移动到选项上，所有父标记都会松开

：hover

伪类

这是因为open下拉列表被实现为一个新窗口（）

我试图用Javascript通过在父元素上使用

mouseenter

和

mouseleave

事件来解决这个问题，但是，不幸的是，当用户将鼠标移动到打开的下拉列表上时，

mouseleave

也会被触发

我迄今为止的努力：

var container=document.getElementById（“容器”）；
var select=document.getElementById（“select”）；
//$（“#选择”）。选择2（）；
container.addEventListener（“mouseenter”，function（））{
container.classList.add（“悬停”）；
});
container.addEventListener（“mouseleave”，function（））{
container.classList.remove（“悬停”）；
});
#容器{
显示：内联块；
背景色：红色；
}
#容器：悬停，
#容器悬停{
背景颜色：绿色；
}

一些选择1
一些选择2
一些选择3

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本

一些长文本


无论出于何种原因，在IE11中，当鼠标移动到select上时会触发mouseleave事件（即使它包含在您正在侦听的父div中）。尝试检查事件的“relatedTarget”属性，以查看您是否正在为后代“离开”div，或者您是否正在实际离开div：

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

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


对于懒惰的人：

关于“相关目标”：

另外：“relatedTarget”兼容所有主要浏览器


编辑：我们在查看容器是否包含“e.relatedTarget”之前检查它的原因（没有双关语）是因为“relatedTarget”可能为空。事实上，“relatedTarget”在您将鼠标悬停在select下拉列表上时始终为空。我很想知道为什么会出现这种情况，而不是在离开div进入HTML主体时触发“mouseleave”，在那里您可以得到一个“relatedTarget”元素。
非常好的答案，谢谢。我猜
relatedTarget
是
null
，原因与此问题存在的原因相同：下拉菜单在IE中的自己窗口中实现