is(':hover') 在 IE 11 中无法正常工作
Posted
技术标签:
【中文标题】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 上得到了结果，这似乎是原因
【参考方案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>【讨论】：
以上是关于is(':hover') 在 IE 11 中无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
Label :hover 属性在 IE10 和 IE11 中触发不正确的元素