JavaScript，在“鼠标悬停”上，当您尝试将鼠标移到块上时会出现并消失答案

【问题标题】：JavaScript, on "mouseover" a block appears and disappears when you try to move the mouse over itJavaScript，在“鼠标悬停”上，当您尝试将鼠标移到块上时会出现并消失
【发布时间】：2020-09-22 20:49:34
【问题描述】：

我需要在 2 个按钮上挂一个“鼠标悬停”处理程序。它应该像这样工作 - 您将鼠标悬停在一个按钮上 - 显示一个块，您可以将鼠标悬停在该块上，并且它不会消失，直到您将鼠标从按钮和块本身移开。如果我将鼠标悬停在另一个块上 - 第一个块消失并显示第二个块，并且会发生同样的事情，就像第一个按钮和块一样。

结果是必需的，当您将鼠标悬停在菜单 https://www.zoo-bio.co.uk/ 上时，就像在此站点上一样

很遗憾，我在网上没有找到这样的东西，没有人问，所以我写在这里。

这是我的代码：

// first button
const carBrandsFilterButton = document.querySelector('.main-header__car-brands-button');
// first hidden block
const carBrandsFilter = document.querySelector('.main-header__car-brands');

// second button
const carPartsFilterButton = document.querySelector('.main-header__car-parts-button');
// second hidden block
const carPartsFilter = document.querySelector('.main-header__car-parts');

// variable for setting timeout
let timeout;

// function when you are over the button
function over(carFilter, carFilterButton) {
  clearTimeout(timeout);
  timeout = setTimeout(() => carFilter.style.display = 'block', 400);
  carFilterButton.style.background = 'rgba(47, 59, 94, 0.9)';
}

// function when you are out of the button
function out(carFilter, carFilterButton) {
  clearTimeout(timeout);
  carFilter.style.display = 'none';
  carFilterButton.style.background = 'rgba(47, 59, 94)';
}

// first listener to handle the first button and his block
document.body.addEventListener('mouseover', (e) => {
  const filterField = e.target.parentNode.closest('.main-header__car-brands');
  if (e.target.dataset.brands === "brands" || filterField !== null) {
    over(carBrandsFilter, carBrandsFilterButton)
  } else if (e.target.tagName === 'BODY' || filterField === null) {
    out(carBrandsFilter, carBrandsFilterButton);
  }
})

// second listener to handle the second button and his block
document.body.addEventListener('mouseover', (e) => {
  const filterField = e.target.parentNode.closest('.main-header__car-parts');
  if (e.target.dataset.parts === "parts" || filterField !== null) {
    over(carPartsFilter, carPartsFilterButton)
  } else if (e.target.tagName === 'BODY' || filterField === null) {
    out(carPartsFilter, carPartsFilterButton);
  }
})

但它不能正常工作，看起来这两个监听器发生冲突。

【问题讨论】：

标签： javascript mouseover

【解决方案1】：

您提供的 Zoo-Bio 示例是使用 JavaScript 完成的，但可以使用纯 HTML 和 CSS 轻松完成。

之所以有效，是因为menu 是menu-button 的子代，它允许您默认隐藏menu，但在menu-button 悬停时显示它。关键是将menu 元素直接放在menu-button 旁边，这样鼠标在菜单中导航时就不会离开该元素。

ul.menu--list {
  position: relative;
  padding-left: 0;
}

li.menu--button {
  display: inline-block;
  padding: 1em 2em;
  margin: 0.2em 0;
  border: 1px solid black;
}

div.expand--menu {
  position: absolute;
  top: 54px;
  left: 0;
  min-width: 50vw;
  min-height: 200px;
  padding: 1em;
  border: 1px solid black;
  background-color: #fff;
  display: none;
}

li.menu--button:hover > .expand--menu {
  display: block;
}

<ul class="main menu--list">
  <li class="menu--button">
    Menu Button 1
    <div class="expand--menu one">
      <ul class="menu--list">
        <li class="menu--button">
          Submenu Button 1
          <div class="expand--menu two">A submenu</div>
        </li>
        <li class="menu--button">
          Submenu Button 2
          <div class="expand--menu two">Another submenu</div>
        </li>
      </ul>
    </div>
  </li>
  <li class="menu--button">
    Menu Button 2
    <div class="expand--menu one">Menu 2</div>
  </li>
</ul>
<div class="content">
  <p>Content under the menu</p>
</div>

【讨论】：

【解决方案2】：

感谢您对问题的回答和解决方案。我之前已经通过css做过，但是这次的任务是通过Javascript来做，发表后我又在这里坐了2个小时，终于找到了解决问题的方法，如果有人感兴趣，我不从代码的角度知道它有多正确，我刚开始编程，但这里有一个 javascript 解决方案。

   // first button
const carBrandsFilterButton = document.querySelector('.main-header__car-brands-button');
// first hidden block
const carBrandsFilter = document.querySelector('.main-header__car-brands');

// second button
const carPartsFilterButton = document.querySelector('.main-header__car-parts-button');
// second hidden block
const carPartsFilter = document.querySelector('.main-header__car-parts');

// variable for setting timeout
let timeout;

// function when you are over the button
function over(carFilter, carFilterButton) {
  clearTimeout(timeout);
  timeout = setTimeout(() => carFilter.style.display = 'block', 400);
  carFilterButton.style.background = 'rgba(47, 59, 94, 0.9)';
}

// function when you are out of the button
function out(carFilter, carFilterButton) {
  clearTimeout(timeout);
  carFilter.style.display = 'none';
  carFilterButton.style.background = 'rgba(47, 59, 94)';
}

document.querySelector('.main-header__filter').addEventListener('mouseover', (e) => {

  if (e.target.className === 'main-header__car-brands-button') {
    // first listener to handle the first button and his block
    document.body.addEventListener('mouseover', (e) => {
      const filterField = e.target.parentNode.closest('.main-header__car-brands');
      if (e.target.dataset.brands === "brands" || filterField !== null) {
        over(carBrandsFilter, carBrandsFilterButton)
      } else {
        out(carBrandsFilter, carBrandsFilterButton);
      }
    })
  }

  if (e.target.className === 'main-header__car-parts-button') {
// second listener to handle the second button and his block
    document.body.addEventListener('mouseover', (e) => {
      const filterField = e.target.parentNode.closest('.main-header__car-parts');
      if (e.target.dataset.parts === "parts" || filterField !== null) {
        over(carPartsFilter, carPartsFilterButton)
      } else {
        out(carPartsFilter, carPartsFilterButton);
      }
    })
  }

})

【讨论】：