如何解决在视口外时保持悬停状态
我在将鼠标悬停在动画上的页面的一角有一个绝对定位的<div>
(基本上是一个菜单)。但是,当光标移到视口之外时,悬停动作结束。我希望菜单保持在光标不在页面上时的悬停状态。
例如:
Retain hover while
|‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾|‾‾‾‾‾‾‾| outside viewport
| Viewport | hover |
| | state |
| |_______|
| |
| |
我有一个Stackblitz代码段,它是该行为的更好示例:https://stackblitz.com/edit/outside-viewport?file=index.html
尽管我的Stackblitz示例使用CSS,但是我不关心该解决方案是否使用JavaScript。
解决方法
您将不得不使用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
,一种方法是使用mouseover
并传递类,而不是将样式应用于悬停。像这样的东西。
let currentState = document.getElementById("menu");
currentState.addEventListener("mouseover",func,false);
function func() {
currentState.classList.add("menuExpand");
}
您将不得不使用mouseout
来缩小菜单。但是在扩展菜单后不知道您的要求,上面的内容只会使其保持扩展状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。