Javascript is（'；：悬停（'；）在IE 11中工作不正常

我有一个抽屉菜单，当我将鼠标悬停在菜单上部的列表项上时，它会打开导航菜单的底部

当您将鼠标从上半部分的列表项移动到菜单时，我希望保持底部菜单打开，但如果将鼠标移到其他位置，则使其消失

因此，我给了菜单一个ID，并用Jquery控制移动

我写了这样的东西

  $('.headerNavigationGroupList').mouseleave(() => {
    if ($('#navMenu').is(':hover')) {
      //if navMenu is hovered, do nothing//
      return
    }else {
        //else close the menu//
      const elements = document.getElementsByClassName(
        'headerBottom__list-group',
      )
      closeMenu(elements)
    }
  })

这在googleChrome中非常有效，但在IE11中不起作用

我做了console.log$（“#navMenu”）.is（“：hover”），似乎IE11无法检查nav菜单是否悬停

接下来，我像这样修改了代码

$('#navMenu:hover').length > 0 

<div class="headerBottom" id="navMenu">
  <div class="headerBottomInner">
    <div class="headerBottom__list-group">
      <ul class="headerBottom__list-group__list">
        <li class="is-about headerBottom__list-group__list__item">
        //stuff//
         </li>

      </ul>
   </div>
  </div>
</div>

然而，一切都没有改变。控制台日志仍然显示为0，尽管在谷歌chrome上显示为1

我不知道为什么这只发生在IE上。有人知道为什么吗

dom的底部如下所示

$('#navMenu:hover').length > 0 

<div class="headerBottom" id="navMenu">
  <div class="headerBottomInner">
    <div class="headerBottom__list-group">
      <ul class="headerBottom__list-group__list">
        <li class="is-about headerBottom__list-group__list__item">
        //stuff//
         </li>

      </ul>
   </div>
  </div>
</div>

//东西//

作为注释，IE不支持lambda。并且在元素

headerNavigationGroupList

和元素

navMenu

之间不要保持一定距离。当鼠标离开

headerNavigationGroupList

时，元素

navMenu

已隐藏

您可以遵循另一个示例

在

headerNavigationGroupList

和

navMenu

之间保持距离

文件
集团总经理


//东西//


$（函数（）{
常量元素=document.getElementsByClassName(
“headerBottom\uuu列表组”）[0]。style.cssText=“显示：无”
$（'.headerNavigationGroupList'）.mouseleave（函数（）{
if（$（'#navMenu'）。是（':hover'））{
//如果导航菜单悬停，则不执行任何操作//
返回
}否则{
//否则请关闭菜单//
常量元素=document.getElementsByClassName(
“headerBottom\uuuu列表组”
)[0]
关闭菜单（元素）
}
})
$（'.headerNavigationGroupList'）.mouseenter（函数（）{
常量元素=document.getElementsByClassName(
“headerBottom\uuuu列表组”
)[0]。style.cssText='display:block'
})
})
功能关闭菜单（e）{
e、 style.cssText='显示：无'
}

首先，IE11中不支持“胖箭头”功能。改为编写“完整”函数。无论如何，您应该为jQuery事件处理程序编写完整的函数，因为只有那些函数才能提供正确的

此

处理。我尝试过，但它不起作用，我使用的是typescript，我的eslint在运行Build时出错。您能在IE11上使用

：hover

来处理

文档。querySelectorAll

吗？（这是一个普通的JS，相当于jQuery的功能。）我刚刚在IE11上尝试了

document.queryselectoral（“：hover”）

，它工作了，但它不一定对应于在开发工具打开时悬停的元素。也就是说，右键单击该元素并选择“inspect element”->该元素被设置为悬停的样式，但对于控制台命令来说不算悬停。实际上，将其悬停，对于控制台命令它也算悬停。我刚刚尝试了document.querySelector（“.headerBottom\uuuu list-group\uuuu list:hover”），它返回null，尽管我在chrome上得到了结果，但似乎这就是原因