Change text color of a span with Javascript while hovering on seperated div

I have a menupoint and underneath it a seperate div / mega menu. I triggered the mega menu to show up via Javascript. When I am hovering over the mega menu, the desired span in the menu should get highlighted with another color and also the background color should change. You can see in the code how I tried to solve it (comments included). Can you please help me. I don´t know why I can´t trigger it via .getElementsByClassName!?

//Showing mega menu on hover over menu point

document.getElementById("menu-item-136").addEventListener("mouseover", mouseOver);
document.getElementById("menu-item-136").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById("mega-menu").style.display = "block";
}

function mouseOut() {
  document.getElementById("mega-menu").style.display = "none";
}



//Let mega menu stay visible when hovering over it
//Style menupoint when hovering over mega menu div (NOT WORKING)!

document.getElementById("mega-menu").addEventListener("mouseover", mouseOver);
document.getElementById("mega-menu").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById("mega-menu").style.display = "block";
  document.getElementsByClassName (".aux-menu-label").style.color = "yellow";
}

function mouseOut() {
  document.getElementById("mega-menu").style.display = "none";
  document.getElementsByClassName (".aux-menu-label").style.color = "";
}

.menu-item-136 {
background-color: grey;
height: 50px;
}

.menu-item-136:hover {
background-color:green;
}

.aux-menu-label {
color:blue;
}

.mega-menu-1 {
display: none;
background-color: green;
height: 200px;
}

<div>
<li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
            <a href="#" class="aux-item-content">
                <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
            <span class="aux-submenu-indicator"></span></a>
</div>



<div id="mega-menu" class="mega-menu-1">content</div>

Thanks for your help!

Solution

Your code is a bit messy but you are calling your class incorrectly:

This:

document.getElementsByClassName (".aux-menu-label")

Should be this:

document.getElementsByClassName ("aux-menu-label")

Additionally, when using getElementsByClassName you are provided with an array-like object with all elements that have the class you have specified.

With that in mind, you must run a loop to target elements with the styles you want to apply.

The below code is how we will target multiple labels and change them to yellow on hover:

  var labels = document.getElementsByClassName("aux-menu-label");
  for (var i = 0; i < labels.length; i++) {
    labels[i].style.color = "yellow"
  }

When you run the snippet below you will see I have used similar code to revert the color back to blue onmouseout.

Learn more about getElementsByClassName here.

//Including this to show you how to target CSS child elements as described in your comment
var childElement = document.querySelector('#menu-item-136 .aux-item-content'); 
childElement.style.backgroundColor = "white";
console.log(childElement);

//Showing mega menu on hover over menu point

document.getElementById("menu-item-136").addEventListener("mouseover", mouseOver);
document.getElementById("menu-item-136").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById("mega-menu").style.display = "block";
}

function mouseOut() {
  document.getElementById("mega-menu").style.display = "none";
}



//Let mega menu stay visible when hovering over it
//Style menupoint when hovering over mega menu div (NOT WORKING)!

document.getElementById("mega-menu").addEventListener("mouseover", mouseOver);
document.getElementById("mega-menu").addEventListener("mouseout", mouseOut);

function mouseOver() {
  document.getElementById("mega-menu").style.display = "block";
  var labels = document.getElementsByClassName("aux-menu-label");
  for (var i = 0; i < labels.length; i++) {
    labels[0].style.color = "yellow"
  }
}

function mouseOut() {
  document.getElementById("mega-menu").style.display = "none";
  var labels = document.getElementsByClassName("aux-menu-label");
  for (var i = 0; i < labels.length; i++) {
    labels[i].style.color = "blue"
  }
}

.menu-item-136 {
  background-color: grey;
  height: 50px;
}

.menu-item-136:hover {
  background-color: green;
}

.aux-menu-label {
  color: blue;
}

.mega-menu-1 {
  display: none;
  background-color: green;
  height: 200px;
}

<div>
  <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
    <a href="#" class="aux-item-content">
      <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
      <span class="aux-submenu-indicator"></span></a>
</div>



<div id="mega-menu" class="mega-menu-1">content</div>

<div>
  <li id="menu-item-136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-136 aux-menu-depth-0 aux-menu-root-2 aux-menu-item">
    <a href="#" class="aux-item-content">
      <span class="aux-menu-label"><i aria-hidden="true" class="services auxicon-list"></i>&nbsp;&nbsp;Leistungen</span>
      <span class="aux-submenu-indicator"></span></a>
</div>



<div id="mega-menu" class="mega-menu-1">content</div>

EDIT: I've included the following javascript to show you how to target child elements and apply CSS to them. The code below will target the child of #menu-item-136 and change its background color to white. Run the snippet to see.

var childElement = document.querySelector('#menu-item-136 .aux-item-content'); 
childElement.style.backgroundColor = "white";
console.log(childElement);