纯JS如何具有多个mouseleave事件侦听器

Question

尝试在不同元素上分别监听2个鼠标事件。这是JS

function moveDown(event) {
  const submenus = document.getElementsByClassName('sub-menu')
  var navbar = document.getElementById("menu-1");

  var sub

  if (event.target.innerHTML === "ABOUT US") {
    sub = submenus[0]
  } else {
    sub = submenus[1]
  }

  var rect = sub.getBoundingClientRect();
  navbar.style.marginBottom = rect.height + "px"
}


function moveUp(event) {
  var navbar = document.getElementById("menu-1");
  navbar.style.marginBottom = 0
}

(function() {
  var takeAction = document.getElementsByClassName('takeAction')[0]
  var aboutUs = document.getElementsByClassName('aboutUs')[0]

  aboutUs.addEventListener('mouseover', function(event) {
    moveDown(event)
  }, {
    passive: false
  })
  takeAction.addEventListener('mouseover', function(event) {
    moveDown(event)
  }, {
    passive: false
  })

  aboutUs.addEventListener('mouseleave', function(event) {
    moveUp(event)
  }, {
    passive: false
  })
  takeAction.addEventListener('mouseleave', function(event) {
    moveUp(event)
  }, {
    passive: false
  })
})()

这适用于第二个元素“ takeAction”，但是第一个元素“ aboutUs”上的mouseleave侦听器似乎可以用作mouseout

更新：

我尝试生成该问题的有效代码段，但这是在wordpress中完成的，但我无法这样做。但是，这是指向site

的链接

如果将鼠标悬停在“关于我们”上，然后将鼠标悬停在“采取行动”上，您会发现问题所在