Javascript 在视口外保持悬停状态

我有一个绝对定位的

（基本上是一个菜单）在一个页面的角落里，可以在悬停时进行动画。但是，当光标移动到视口之外时，悬停动作结束。我希望菜单在光标离开页面时保持悬停状态

例如：

保持悬停
|外视窗
|视口|悬停|
||国家|
|                    |_______|
|                            |
|                            |

我有一个Stackblitz片段，这是一个更好的行为示例：

---

虽然我的Stackblitz示例使用CSS，但我不在乎解决方案是否使用JavaScript。

一种方法是使用

鼠标悬停

并传递类，而不是在悬停时应用样式。像这样的

    let currentState = document.getElementById("menu");
    currentState.addEventListener("mouseover", func, false);

    function func() { 
      currentState.classList.add("menuExpand");
    }

---

您必须使用

mouseout

缩小菜单。但是，在菜单展开后，如果不知道您的需求，上述操作只会使其保持展开状态。

您必须使用javascript添加一个类，以将其显示为“悬停”状态，然后监视窗口的

鼠标悬停事件，并测试该事件是否来自
菜单之外


（函数（）{
设menuIsActive=false；
const menuElement=document.querySelector（“#menu”）；
常数mouseEnter=（）=>{
menuElement.classList.add（'active'）
window.addEventListener（'mouseover'，mouseOverWindow）；
}
常数mouseOverWindow=（e）=>{
如果（！e.target.closest（'#menu'））{
menuElement.classList.remove（'active'）；
removeEventListener（'mouseover'，mouseOverWindow）
}
}
menuElement.addEventListener（'mouseenter'，mouseenter）
})();
#内容，h4{
最大宽度：70%；
}
#菜单{
背景色：红色；
边框：3倍纯黑；
边界顶部：无；
边界权：无；
边框左下半径：5px；
位置：绝对位置；
身高：12%；
宽度：15%；
排名：0；
右：0；
过渡：0.5s；
}
#菜单.活动{
背景颜色：紫色；
身高：40%；
宽度：22%；
}

当光标位于视口之外时，红色框应保持悬停状态
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
这是一个很好的解决方案。非常感谢。