Mouseenter Event Failing to Trigger

Question

I have a set of 3 menu items that i'm trying to add a mouseenter event to. I can't seem to get it to work at all. I've also tried looping through the .menu-item class and nothing is happening.

It's driving me nuts. Does anyone know why this isn't working?

Many thanks in advance for any help

Code is below and Codepen link is: https://codepen.io/emilychews/pen/VzaOoe

(Also I can't have a jQuery solution).

JS

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

  function myMouseEnter() {

    alert('mouse entered');

  }

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

Commented-Out Version Using a Loop

//   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

You have to iterate throw the collection and add event listener on each element like this :

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);
}