is(':hover') 在 IE 11 中无法正常工作答案

【问题标题】：is(':hover') is not working properly in IE 11is(':hover') 在 IE 11 中无法正常工作
【发布时间】：2021-03-08 18:18:51
【问题描述】：

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

当您将鼠标从上部的列表项移动到菜单时，我想保持底部菜单打开，但如果您将鼠标移到其他地方，它会消失。

所以，我给菜单一个 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 无法检查导航菜单是否悬停。

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

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

然而，一切都没有改变。控制台日志仍然显示 0，即使它在 google chrome 上显示为 1。

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

dom的底部是这样的

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

【问题讨论】：

一方面，IE11 不支持“胖箭头”功能。改为编写“完整”函数。无论如何，您应该为 jQuery 事件处理程序编写完整的函数，因为只有这些函数才能为您提供正确的 this 处理。
我试过了，但它不起作用，我使用 typescript 并且我的 eslint 在我执行 yarn run build 时出错
你能让:hover 在IE11 上与document.querySelectorAll 一起工作吗？（这是一个普通的 JS，相当于 jQuery 所做的。）
我刚刚在 IE11 上尝试了document.queryselectorAll(":hover")，它确实有效，但它不一定对应于打开开发工具时出现的悬停元素。也就是说，右键单击元素并选择“检查元素”-> 元素的样式就像悬停但不计入控制台命令的悬停。实际上悬停它，它确实算作控制台命令的悬停。
我刚刚尝试了 document.querySelector(".headerBottom__list-group__list:hover")，它返回 null，即使我在 chrome 上得到了结果，这似乎是原因

标签： javascript html jquery css internet-explorer

【解决方案1】：

作为 cmets，IE 不支持 lambda。并且不要在元素headerNavigationGroupList 和元素navMenu 之间保持距离。当鼠标离开headerNavigationGroupList 时，元素navMenu 已被隐藏。

您可以按照替代示例进行操作。

在headerNavigationGroupList 和navMenu 之间保持距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="headerNavigationGroupList">
        headerNavigationGroupList
    
        <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>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function () {
        const elements = document.getElementsByClassName(
            'headerBottom__list-group')[0].style.cssText = 'display:none'
        $('.headerNavigationGroupList').mouseleave(function () {
               
            if ($('#navMenu').is(':hover')) {
                //if navMenu is hovered, do nothing//
                return
            } else {
                //else close the menu//
                const elements = document.getElementsByClassName(
                    'headerBottom__list-group'
                )[0]
                closeMenu(elements)
            }
        })
        $('.headerNavigationGroupList').mouseenter(function () {
            const elements = document.getElementsByClassName(
                'headerBottom__list-group'
            )[0].style.cssText = 'display:block'
        })
    })
    function closeMenu(e) {
        e.style.cssText = 'display:none'
    }
</script>

</html>

将is(':hover') 更改为$('#navMenu').hover()。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="headerNavigationGroupList">
        headerNavigationGroupList
    </div>
        <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>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js""></script>
<script>
    $(function () {
        const elements = document.getElementsByClassName(
            'headerBottom__list-group')[0].style.cssText = 'display:none'
        $('.headerNavigationGroupList').mouseleave(function () {
                $('#navMenu').hover(function(){
                    
                },
                function(){
                    const elements = document.getElementsByClassName(
                        'headerBottom__list-group'
                    )[0]
                    closeMenu(elements)
                })
           
        })
        $('.headerNavigationGroupList').mouseenter(function () {
            const elements = document.getElementsByClassName(
                'headerBottom__list-group'
            )[0].style.cssText = 'display:block'
        })
    })
    function closeMenu(e) {
        e.style.cssText = 'display:none'
    }
</script>

</html>

【讨论】：