EventListener 在悬停时显示隐藏

Posted 2023-03-06

【中文标题】EventListener 在悬停时显示隐藏

【英文标题】：EventListener show hide on hover

【发布时间】：2021-04-28 18:11:27

【问题描述】：

我的标题中有一个带有 CSS 类和 -ID openproduktkat 的按钮。如果我悬停按钮，应该打开一个具有 CSS 类和 -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 添加延迟和相同的悬停效果。

【问题讨论】：

你能分享一下你到目前为止所尝试的吗？

我把它添加到问题部分...

使用 setTimeout 进行计时，使用 [cssText[(w3schools.com/css/css_text.asp) 设置样式。

【参考方案1】：

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

【讨论】：

请注意，OP 还需要 js 样式方面的帮助

还是错了，要么用style.display = 'block'要么用style.cssText = 'display: block;'

【参考方案2】：

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