EventListener 在悬停时显示隐藏

如何解决EventListener 在悬停时显示隐藏

我的标题中有一个带有 css-class 和 -ID openproduktkat 的按钮。如果我将鼠标悬停在按钮上，一个带有 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 添加延迟和相同的悬停效果。

解决方法

下面的 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>

尝试使用 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>