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

您将不得不使用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

Answer 2

一种方法是使用mouseover并传递类，而不是将样式应用于悬停。像这样的东西。

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

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

jsFiddle

您将不得不使用mouseout来缩小菜单。但是在扩展菜单后不知道您的要求，上面的内容只会使其保持扩展状态。

在视口外时保持悬停状态

2 个答案: