Reference Individual Class Elements with 'this'

Question

If I'm looping through different elements with the same class with mouseenter / mouseout events and I'm trying to incorporate the 'this' keyword so the JS only triggers on the element I'm hovering over. I can't get it to work though.

I've stripped out my attempts to use the 'this' keyword to make the code easier to read. How do I go about having it so that only the element being hovered over has the mouseenter and then mouseout events applied to it whilst looping through the elements?

I can't use a jQuery solution.

codepen pen: https://codepen.io/emilychews/pen/mMEEBw

Code is below:

JS

// declare variable for the CSS class
var menuItem = document.querySelectorAll('.menu-item');

//loop through CSS class to change background to red
function myMouseEnter() {
  for (i = 0; i < menuItem.length; i++) {
  menuItem[i].style.background = "red";
  }
}

//loop through CSS class to change remove red background
function myMouseLeave() {
  for (i = 0; i < menuItem.length; i++) {
  menuItem[i].style.background = "none";
  }
}

//event handler to add function on mouseenter
for (j = 0; j < menuItem.length; j++) {
menuItem[j].addEventListener('mouseenter', myMouseEnter, false)
}

//event handler to add function on mouseout
for (k = 0; k < menuItem.length; k++) { menuItem[k].addEventListener('mouseout', myMouseLeave, false)
}

CSS

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

HTML

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

Answer 1

In your two functions, all you need to do is refer to this . In that context, this refers to the .menu-item event that you are currently hovering over.

Note that you'll also probably want to attach a handler for the <a> tag children, or else whenever you hover over them, the script will think you're leaving the <li> , and attempt to change the colours.

This can be done by checking the toElement and relatedTarget of the event in question, and then checking whether those are the parent <li> element.

All up, your code would look like this:

 // declare variable for the CSS class var menuItem = document.querySelectorAll('.menu-item'); // loop through CSS class to change background to red function myMouseEnter() { this.style.background = "red"; } // loop through CSS class to change remove red background function myMouseLeave() { // prevent the 'mouseout' from affecting the <a> children var e = event.toElement || event.relatedTarget; if (e.parentNode == this || e == this) { return; } this.style.background = "none"; } // event handler to add function on mouseenter for (j = 0; j < menuItem.length; j++) { menuItem[j].addEventListener('mouseenter', myMouseEnter, false); } // event handler to add function on mouseout for (k = 0; k < menuItem.length; k++) { menuItem[k].addEventListener('mouseout', myMouseLeave, false); }

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

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

Note that the functions themselves don't have to loop through the menu items again ;)

Hope this helps! :)