在视口外保持悬停状态答案

【问题标题】：Retaining a hover state while outside the viewport在视口外保持悬停状态
【发布时间】：2020-09-23 00:58:58
【问题描述】：

我在页面的角落有一个绝对定位的<div>（基本上是一个菜单），它在悬停时会产生动画。但是，当光标移出视口时，悬停动作结束。我希望菜单在光标离开页面时保持悬停状态。

例如：

                               Retain hover while
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾| outside viewport
| Viewport           | hover |
|                    | state |
|                    |_______|
|                            |
|                            |

我有一个 Stackblitz sn-p，它是该行为的更好示例：https://stackblitz.com/edit/outside-viewport?file=index.html

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

【问题讨论】：

标签： javascript css hover

【解决方案1】：

你必须使用javascript添加一个类使其显示为“悬停”状态，然后监听窗口的mouseOver事件，并测试该事件是否来自外部#menu 以将其缩小。

(function(){
  let menuIsActive = false;
  const menuElement = document.querySelector('#menu');

  const mouseEnter = () => {
     menuElement.classList.add('active')
     window.addEventListener('mouseover', mouseOverWindow);
  }
  const mouseOverWindow = (e) => {
    if (!e.target.closest('#menu')){
      menuElement.classList.remove('active');
      window.removeEventListener('mouseover', mouseOverWindow)
    }
  }

  menuElement.addEventListener('mouseenter', mouseEnter)
})();

#content, h4 {
  max-width: 70%;
}

#menu {
  background-color: red;
  border: 3px solid black;
  border-top: none;
  border-right: none;
  border-bottom-left-radius: 5px;
  position: absolute;
  height: 12%;
  width: 15%;
  top: 0;
  right: 0;
  transition: 0.5s;
}
#menu.active{
  background-color: purple;
  height: 40%;
  width: 22%;
}

<div id="content">
  <h4>The red box should retain the hover state while the cursor is beyond the viewport</h4>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="menu"></div>

https://stackblitz.com/edit/outside-viewport-d2swrb?file=index.js的演示

【讨论】：

这是一个很好的解决方案。谢谢。

【解决方案2】：

一种方法是使用mouseover 并传递类，而不是在悬停时应用样式。像这样。

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

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

jsFiddle

您必须使用mouseout 来缩小菜单。但是菜单展开后不知道你的需求，上面只会继续展开。

【讨论】：