javascript - 将鼠标悬停在单独的 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>

谢谢你的帮助！

标签： javascriptcolorshighlightmegamenu

Answer 1

在您的代码中，如果我们向 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>