javascript - 在鼠标悬停时内联显示 block

Question

我想显示一个 <div>鼠标进入元素时阻塞

到目前为止我的代码:

<div class="dropdown">

    <a href="#men" onmouseover ="ddmenin()" onmouseout="ddmenout()">MEN</a>

    <div class="dropdowncontent" id="ddmen" style="margin-left:100px;"> 

        <a href="#topwear"> TOPWEAR&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><br/>
        <a href="#bottomwear"> BOTTOMWEAR </a></br>
        <a href="#footwear"> FOOTWEAR &nbsp;&nbsp;&nbsp;&nbsp; </a>

    </div> 

</div>

JavaScript 代码:

var ddm=document.getElementById("ddmen")

function ddmenin()
{
    ddm.style.display="block";
}

function ddmenout()
{
    ddm.style.display="none";
}

但是当我将鼠标悬停在 <a href="#men"> 上时我无法单击 <div> 中的链接与 class="dropdowncontent"当我离开 <a href="#men"> 时方 block 消失了

我不明白为什么会这样，因为我使用了 onmouseover，它甚至对子元素也有效。

我已经尝试使用 css 来完成它，但由于某些原因，以下内容不起作用(上面的 html 中使用了 Style.css)

STYLE.CSS

.dropdowncontent{
    display:none; 
}

.dropdown:hover .dropdowncontent{display:block;}

有人可以更正我的代码以满足我的需要或有任何其他简单的替代方法吗？

Answer 1

好吧，你的 div 链接容器不是 a 链接的一部分，所以当你将光标移动到下拉菜单时你离开了链接并且 onmouseout 听众做它的工作。

您想要的是在不再需要时隐藏菜单。例如。您单击了菜单项，或者您离开了菜单并且有一段时间没有返回。

为此，您可以执行以下操作:

• 添加隐藏菜单到菜单项上的 click 监听器
• 添加一个功能，在您离开下拉按钮或菜单时立即启动一些计时器(这样就产生了两个 onmouseout 监听器)。如果您返回那里，您可以在 onmouseover 中重置计时器。计时器完成后，您可以隐藏菜单。

它看起来像这样:

const $ = document.querySelector;
let menuTimeoutId;
const menu = $('#ddmen');

function stopMenuTimeoutAndShowMenu() { 
    if (menuTimeoutId) {
        clearTimeout(menuTimeoutId);
        menuTimeoutId = null;
    }
     menu.style.display = 'block';
}

function startMenuTimeout() {
    window.menuTimeoutId = setTimeout(() => {
        menu.style.display = 'none';
    }, 2000); // possible timeout value
}
$('#men, #ddmen').addEventListener('onmouseover', stopMenuTimeoutAndShowMenu);
$('#men, #ddmen').addEventListener('onmouseout', startMenuTimeout);