EventListener显示隐藏在悬停

Question

我有一个按钮，CSS-class和-IDopenproducktkat在我的头部。如果我将按钮悬停，一个具有CSS-class和-ID的对象menuproduktkat应该开放。如果我留下了按钮或目标，目标应该关闭。在用鼠标离开目标点之前应该有一个延迟。有人能帮我解决这个问题吗?我是一个编程初学者，这对我来说似乎很难…

这就是我所尝试的:

var openproduktkat = document.getElementById('openproduktkat');
var menuproduktkat = document.getElementById('menuproduktkat');
openproduktkat.addEventListener('mouseover', mouseOver);
openproduktkat.addEventListener('mouseout', mouseOut);
function mouseOver() {
menuproduktkat.style = 'display: block;'}
function mouseOut() {
menuproduktkat.style = 'display: none'}

鼠标悬停打开和关闭openproduktkat工作，但我不知道如何添加延迟和相同的悬停效果menuproduktkat.

Answer 1

下面的mouseOut函数使用setTimeout将隐藏延迟1秒。

请注意，由于按照要求，代码将在鼠标从按钮移到目标元素后隐藏目标元素，因此目标元素将消失。

这可能不是您想要的行为，因为如果用户将鼠标从按钮移到目标元素，则很可能用户希望目标元素保持可见。

因此，当用户将鼠标移到目标元素上时，下面的代码将取消该元素的隐藏。

const openproduktkat = document.getElementById('openproduktkat');
const menuproduktkat = document.getElementById('menuproduktkat');
let timeoutId = null;
// make target element visible
function mouseOver() {
menuproduktkat.style.display = "";

// cancel time-delayed hide if it exists
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
}
// hide target element after 1 second
function mouseOut(evt) {
timeoutId = setTimeout(() => {
menuproduktkat.style.display = 'none';
timeoutId = null;
}, 1000);
}

openproduktkat.addEventListener('mouseover', mouseOver);
openproduktkat.addEventListener('mouseout', mouseOut);
menuproduktkat.addEventListener('mouseover', mouseOver);
menuproduktkat.addEventListener('mouseout', mouseOut);

div {
outline: 1px solid blue;
min-height: 40px;
margin: 0.5rem;
}

<button id="openproduktkat">#openproduktkat</button>
<div id="menuproduktkat" style="display:none">#menuproduktkat</div>

Answer 2

Try with setTimeout:

let btn = document.getElementById('btn');
var menuproduktkat = document.getElementById('menuproduktkat');
btn.addEventListener('mouseover', () => {  
menuproduktkat.style = 'display: block'
})
btn.addEventListener('mouseout', () => {
setTimeout(() => {
menuproduktkat.style = 'display: none'
}, 1000)
})

<button type="button" id="btn">Hover!</button>
<div id="menuproduktkat" style="display: none">
<p>text</p>
</div>