在视口外保持悬停状态

Question

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

例如：

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

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

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

Answer 1

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

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

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

jsFiddle

您将不得不使用 mouseout 来缩小菜单。但是展开菜单后不知道你的要求，上面只会一直展开。

Answer 2

你必须使用javascript添加一个class以显示在“悬停”状态，然后监视mouseOver window 的事件，并测试事件是否来自 #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

在视口外保持悬停状态

Retaining a hover state while outside the viewport

javascript

css

hover