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

Question

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

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

在此处了解有关getElementsByClassName更多信息。

 //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的子#menu-item-136并将其背景颜色更改为白色。 运行代码片段来查看。

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

Answer 2

在您的代码中，如果我们向 megamenu 包装器添加一些边距，当指针从菜单项中移出时，这将不起作用并且菜单关闭。

我已经解决了这个问题

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

代码笔示例

 [].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>