is(':hover') 在 IE 11 中无法正常工作
[英]is(':hover') is not working properly in IE 11
问题描述
我有一个抽屉菜单，当我在菜单上部的列表项上 hover 时打开导航菜单的底部。
当您将鼠标从上部的列表项移动到菜单时，我想保持底部菜单打开，但如果您将鼠标移到其他地方，它会消失。
所以，我给菜单一个 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>
1 个解决方案
解决方案1
1 2020-11-26 04:52:44
作为评论，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>
HTML5中的textAlign属性Canvas在IE 11中无法正常工作
[英]textAlign Property in HTML5 Canvas not working properly in IE 11
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.