Événement Mouseenter à défaut de déclencher

Question

J'ai un ensemble de 3 éléments de menu auxquels j'essaie d'ajouter un événement mouseenter. Je n'arrive pas à le faire fonctionner du tout. J'ai également essayé de boucler la classe .menu-item et rien ne se passe.

Ça me rend fou. Est-ce que quelqu'un sait pourquoi cela ne fonctionne pas?

Un grand merci à l'avance pour toute aide

code

est ci-dessous et le lien Codepen est: https://codepen.io/emilychews/pen/VzaOoe

(Je ne peux pas avoir une solution jQuery).

JS

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

    function myMouseEnter() { 

    alert('mouse entered'); 

    } 

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

en commentaire Version utilisation d'une boucle

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

Vous devez itérer lancer la collection et ajoutez écouteur d'événement sur chaque élément comme celui-ci:

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

sélecteurs de requête JS renvoie toujours l'élément sous forme de tableau, donc dans votre cas, vous pouvez utiliser quelque chose comme ça ,

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

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

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