Question

我希望将光标悬停在子菜单上，但此后一旦将鼠标悬停在任何链接上就关闭了子菜单。

这是代码

HTML

<div class="body">
    <div class="menu">HOVER HERE</div>
    <ul class="drop-down">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>
</div>

CSS

.body {
  width: 400px;
  margin: 0 auto;
  margin-top: 30vh;
  font-family: Lato, sans-serif;
}
.menu {
  display:block;
  border: 1px solid #000;
  width: 150px;
  background: #000;
  color:#FFF;
  padding: 15px;
  text-align:center;
}
ul li {
  border: 1px solid #000;
  width: 150px;
  padding: 15px;
  list-style:none;
  text-align:center;
}
ul {
  margin: 0;
  padding: 0;
}
.drop-down {
  display:none;

}
.open {
  display:block;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    var dropdownItem = document.querySelector('.menu');
    var dropdown = document.querySelector('.drop-down');

    dropdownItem.addEventListener('mouseenter', function (e) {
        dropdown.classList.add('open');
    });
    dropdownItem.addEventListener('mouseleave', function () {
        dropdown.classList.remove('open');
    })
})

Codepen在这里

https://codepen.io/Kenneman/pen/yLLPmeX

Answer 1

这个问题已经在SO上解决了上千次，并且几乎每个仅CSS菜单都演示了它的完成方式。子菜单必须位于悬停的元素内。无需JavaScript：

.menu:hover ul {
    display: block;
}

Demo

您必须摆弄样式才能固定子菜单背景，但这就是这个主意。

子菜单上的鼠标悬停延迟

1 个答案: