javascript - Mouseenter 事件无法触发

Question

我有一组 3 个菜单项，我正在尝试向其中添加 mouseenter 事件。我似乎根本无法让它发挥作用。我还尝试循环遍历 .menu-item 类，但没有任何反应。

这让我发疯。有谁知道为什么这不起作用？

提前非常感谢您的帮助

代码如下，Codepen 链接为:https://codepen.io/emilychews/pen/VzaOoe

(而且我也没有 jQuery 解决方案)。

JS

var menuItem = document.querySelectorAll('.menu-item');

  function myMouseEnter() {

    alert('mouse entered');

  }

menuItem.addEventListener('mouseenter', myMouseEnter, false)

使用循环的注释版本

//   function myMouseEnter() {

//     for(i=0; i < menuItem.length; i++){

//        alert ('mouse entered');
//       
//       }

//     }

//   menuItem.addEventListener('mouseenter', myMouseEnter, false)

CSS

.menu-item {
padding: 10px;
font-family: arial;
}

HTML

<ul class="unclick--menuitems">
  <li class="menu-item item1"><a href="//google.com">About</a></li>
  <li class="menu-item item2"><a href="//google.com">Work</a></li>
  <li class="menu-item item3"><a href="//google.com">Contact</a></li>
</ul>

Answer 1

您必须迭代集合并在每个元素上添加事件监听器，如下所示:

var menuItems = document.querySelectorAll('.menu-item');

function myMouseEnter() {
 alert('mouse entered');
}

for(var i=0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('mouseenter', myMouseEnter, false);
}