将鼠标悬停在单独的 div 上时使用 Javascript 更改跨度的文本颜色

Question

我有一个菜单点，在它下面有一个单独的 div / mega 菜单。我触发了通过 Javascript 显示的巨型菜单。当我将鼠标悬停在大型菜单上时，菜单中所需的跨度应该用另一种颜色突出显示，并且背景颜色也应该改变。您可以在代码中看到我如何尝试解决它（包括 cmets）。你能帮我么。我不知道为什么我不能通过 .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>

感谢您的帮助！

Answer 1

你的代码有点乱，但是你错误地调用了你的类：

这个：

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

应该是这样的：

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

此外，当使用getElementsByClassName 时，您将获得一个类似数组的对象，其中包含具有您指定的类的所有元素。

考虑到这一点，您必须运行一个循环来定位具有您想要应用的样式的元素。

以下代码是我们如何定位多个标签并在悬停时将它们更改为黄色：

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

当您运行下面的 sn-p 时，您会看到我使用类似的代码将颜色恢复为蓝色 onmouseout。

详细了解getElementsByClassNamehere。

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

编辑：我已包含以下 javascript 来向您展示如何定位子元素并将 CSS 应用于它们。下面的代码将针对#menu-item-136 的孩子并将其背景颜色更改为白色。运行sn -p查看。

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

Answer 2

在您的代码中 如果我们向 megamenu 包装器添加一些边距，这将无法正常工作 当指针从菜单项中移出时，菜单关闭。

我已经解决了这个问题

它看起来像 WordPress 菜单。请查看下面的示例，这将有助于使用多个超级菜单您需要将 megamenu 数据 id 与菜单类项映射。

codepen example

 [].forEach.call(document.querySelectorAll('nav > ul > li'), function (link) {
        link.addEventListener('mouseover', coloringHandler);
        link.addEventListener('mouseout', decoloringHandler);
    });

    [].forEach.call(document.querySelectorAll('.megamenu'), function (menu) {
        menu.addEventListener('mouseover', megamenuHover );
    });


    var state = false;
    
    function coloringHandler(){
        state = false;
        hideAllMegamenu();
        // add class to current hover element
        this.classList.add('active');
        var Classes = this.classList; // getting all class list
        Classes.forEach(name => {
            var megaMenu  = document.querySelectorAll('[data-id="'+name+'"]'); // check if have any mached elements with class name 
            if(megaMenu.length == 1 ){
                megaMenu[0].classList.add('active');
                state = true;

                megaMenu[0].addEventListener('mouseover', megamenuHover );
                megaMenu[0].addEventListener('mouseout', megamenuHoverOut );

                return;
            }
        });
    }

    function decoloringHandler(){
        if( state == false ){
            this.classList.remove('active');
            hideAllMegamenu();
        }
    }

    function hideAllMegamenu(){
        // change elemets as you want
        [].forEach.call(document.querySelectorAll('nav > ul > li'), function (li) {
            li.classList.remove("active");
        });
        // .megamenu is common class
        [].forEach.call(document.querySelectorAll('.megamenu'), function (menues) {
            menues.classList.remove('active');
        })
    }

    function  megamenuHover() {
        this.classList.add('in-hover');
    }

    function megamenuHoverOut() {
        hideAllMegamenu();
    }

nav ul{
    display:flex;
    list-style:none;
    }

    li{
    margin:0px 10px;
    }

    a{
    background:green;
    display:block;
    color:white;
    padding:10px 20px;
    }

    ul li.active a{
    background:red;
    }


    .megamenu{
    background: red;
    height:200px;
    pointer-events: none;
    opacity:0;
      position:absolute;
            width:100%;
      padding:20px;
      color:#fff;
      transition:all .5s ease;
      transform:translateY(50px);
    }

    .megamenu.active{
    opacity:1;
    pointer-events: all;
      transform:translateY(0px);
    }

<h1>Hover over the menu Items</h1> 
<nav>
   <ul>
     <li class="menu-item-136">
       <a href="#"><span>Home</span></a>
     </li>
     <li class="menu-item-137">
       <a href="#"><span>Contact us</span></a>
     </li>
     <li class="menu-item-138">
       <a href="#"><span>Danushka</span></a>
     </li>
     
     <li class="menu-item-139">
       <a href="#"><span>About us</span></a>
     </li>
   </ul>
</nav>

<div class="megamenu" data-id="menu-item-137">
  Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="megamenu" data-id="menu-item-138">
  Danushka Megamenu... Add data id for mapping
</div>