Mouseenter Event kann nicht ausgelöst werden

Question

Ich habe eine Reihe von 3 Menüpunkten, denen ich mouseenter event hinzufügen möchte. Ich kann es anscheinend überhaupt nicht zur Arbeit bringen. Ich habe auch versucht, durch die .menu-item Klasse zu durchlaufen und nichts passiert.

Es macht mich verrückt. Weiß jemand, warum das nicht funktioniert?

Vielen Dank im Voraus für jede Hilfe

-Code ist unten und Codepen Link lautet: https://codepen.io/emilychews/pen/VzaOoe

(Auch ich kann keine jQuery Lösung haben).

JS

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

    function myMouseEnter() { 

    alert('mouse entered'); 

    } 

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

kommentiert-Out Version Mit Hilfe einer 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

Sie haben die Sammlung iterieren werfen und Ereignis-Listener auf jedem Element wie folgt hinzu:

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

Answer 2

JS Abfrage Selektoren wird das Element in Form von Arrays immer wieder zurückkehren, so in Ihrem Fall, dass Sie so etwas wie dieses verwenden können ,

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

function myMouseEnter() { 
console.log('mouse entered'); 
} 

menuItems[0].addEventListener('mouseenter', myMouseEnter);