0

У меня получилось настроить navbar на клик, но не получается переписать этот код под onmouseover.

Помогите, пожалуйста, вот код

document.addEventListener('DOMContentLoaded', () => {
    const menuBtns = document.querySelectorAll('.header-for-992px__nav__ul__li_span');
    const drops = document.querySelectorAll('.header-for-992px__nav__ul-menu');

    menuBtns.forEach(el => {
        el.addEventListener('click', (e) => {
            let currentBtn = e.currentTarget;
            let drop = currentBtn.closest('.header-for-992px__nav__ul__li').querySelector('.header-for-992px__nav__ul-menu');


            menuBtns.forEach(el => {
                if(el !== currentBtn){
                    el.classList.remove('activee');
                }
            });

            drops.forEach(el => {
                if(el !== drop){
                    el.classList.remove('grid-header')
                }
            })

            drop.classList.toggle('grid-header')
            currentBtn.classList.toggle('activee');
        })
    })

    document.addEventListener('click', (e) => {
        if(!e.target.closest('.header-for-992px__nav')){
            menuBtns.forEach(el => {
                el.classList.remove('activee');
                
            });
            drops.forEach(el => {
                el.classList.remove('grid-header')
            })
        }
    })
});
// я использую scss e - это элемент, m - модификатор  

.header-for-992px{
    display: block;
    left: 0;
    top: -100px;
    z-index: 10;
    
    @include e(container){
        padding: 15px 0;
        display: flex;
        
    }
    @include e(nav){
        width: 40%;
        position: relative;
       @include e(ul){
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        padding: 0 15px;
        cursor: pointer;
        @include e(li){
            list-style: none;
            @include m(span){
                position: relative;
                font-size: 17px;
                text-transform: uppercase;
                text-decoration: none;
                color: $colorNav992px;
                padding: 8px;
                font-weight: $mediumFontWeight;
                &:hover {
                    color:$red;
                }

                &::after {
                    position: absolute;
                    content: "";
                    border-bottom: 1px solid $red;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    transform: scaleX(0);
                    transform-origin: right;
                    transition: transform .6s;
                }

                &:hover::after {
                    transform: scaleX(1);
                    transform-origin: left;
                }
                
            }
        }
       }

       @include e(ul-menu){
            min-width: 100%;
            display: none;
            padding-bottom: 10px;
            background: $white;
            position: absolute;
            top: 47px;
            left: 2px;
            z-index: 2;
            cursor:auto;
        
        @include e(li){
            position: relative;
            list-style: none;
            padding: 10px;
            cursor:pointer;
           
            
            &::after{
                position: absolute;
                bottom: 4px;
                left: 9px;
                content: '';
                width: 35px;
                height: 1px;
                background: $red;
            } 

            @include e(img){
                margin-bottom: 10px;
                &:hover {
                    box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
                    transition: all .2s linear;
                }
            }
           

            @include e(a){
                text-decoration: none;
                color: $black;
                text-transform: uppercase;
                &:hover{
                    color: $red;
                }
            }
        
        }

    }
        
    }

    @include e(logo){
        width: 175px;
        @include m(img){
            width: 100%;
        }
    }

    @include e(right){
        display: flex;
        align-items: center;
        margin-left: auto;
         @include m(img){
            cursor: pointer;
            width: 24px;
            height: 24px;
            margin-right: 18px;
         }
    }
}


.grid-header{
    padding: 0;
    display:grid;
    grid-template-areas: 
        "m1 m2 m3"
        "m4 m5 ."
    ;
}

.first-li {
    grid-area: m1;
}

.second-li {
    grid-area: m2;
}

.third-li {
    grid-area: m3;
}

.fourth-li {
    grid-area: m4;
}

.fifth-li {
    grid-area: m5;
}

.activee {
    color: $red;
}
<nav class="header-for-992px__nav">
                <ul id="nav-main-ul" class="header-for-992px__nav__ul">
                  <li class="header-for-992px__nav__ul__li">
                    <span class="header-for-992px__nav__ul__li_span" id="click">home</span>
                      <ul class="header-for-992px__nav__ul-menu">
                        <li class="header-for-992px__nav__ul-menu__li first-li">
                          <div class="header-for-992px__nav__ul-menu__li__img">
                            <img src="i/menu-h1.jpg" alt="">
                          </div>
                          <a href="#" class="header-for-992px__nav__ul-menu__li__a">home 1</a>
                        </li>
                        <li class="header-for-992px__nav__ul-menu__li second-li">
                          <div class="header-for-992px__nav__ul-menu__li__img">
                            <img src="i/menu-h2.jpg" alt="">
                          </div>
                          <a href="#" class="header-for-992px__nav__ul-menu__li__a">home 2</a>
                        </li>
                        <li class="header-for-992px__nav__ul-menu__li third-li">
                          <div class="header-for-992px__nav__ul-menu__li__img">
                            <img src="i/menu-h3.jpg" alt="">
                          </div>
                          <a href="#" class="header-for-992px__nav__ul-menu__li__a">home 3</a>
                        </li>
                        <li class="header-for-992px__nav__ul-menu__li fourth-li">
                          <div class="header-for-992px__nav__ul-menu__li__img">
                            <img src="i/menu-h4.jpg" alt="">
                          </div>
                          <a href="#" class="header-for-992px__nav__ul-menu__li__a">home 4</a>
                        </li>
                        <li class="header-for-992px__nav__ul-menu__li fifth-li">
                          <div class="header-for-992px__nav__ul-menu__li__img">
                            <img src="i/menu-h5.jpg" alt="">
                          </div>
                          <a href="#" class="header-for-992px__nav__ul-menu__li__a">home 5</a>
                        </li>
                      </ul>
                  </li>


                  <li class="header-for-992px__nav__ul__li">
                    <span class="header-for-992px__nav__ul__li_span">shop</span>
                    <ul class="header-for-992px__nav__ul-menu p30 left-100">
                      <li class="header-for-992px__nav__ul-menu__li-second li-one">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP LAYOUTS</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li ">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Pagination</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Ajax Load More</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">List View</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Fullwidth Layouts</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
                          </li>
                        </ul>
                      </li>
                      
                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP HEADING</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Small Heading</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Banner Heading</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Dark Heading</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Icon Category</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Mini Category</a>
                          </li>
                        </ul>
                      </li>
                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">FILTER LAYOUT</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Top Filter</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Drawer Filter</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Off Canvas Filter</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Brand Filter</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sticky Filter</a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="header-for-992px__nav__ul__li">
                    <span class="header-for-992px__nav__ul__li_span">featured</span>
                    <ul class="header-for-992px__nav__ul-menu p30 left-190">
                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT TYPES</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Simple</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Color</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Image</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Select</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">External / Affiliate</a>
                          </li>
                        </ul>
                      </li>

                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Promo Text</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Trust Sale</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Countdown</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Featured Video</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
                          </li>
                        </ul>
                      </li>

                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP LAYOUTS</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Pagination</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Ajax Load More</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">List View</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Fullwidth Layouts</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="header-for-992px__nav__ul__li">
                    <span class="header-for-992px__nav__ul__li_span">pages</span>
                    <ul class="header-for-992px__nav__ul-menu p30 left-320">
                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT TYPES</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Simple</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Color</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Image</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Select</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">External / Affiliate</a>
                          </li>
                        </ul>
                      </li>

                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Promo Text</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Trust Sale</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Countdown</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Featured Video</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
                          </li>
                        </ul>
                      </li>

                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP LAYOUTS</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Pagination</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Ajax Load More</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">List View</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Fullwidth Layouts</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li class="header-for-992px__nav__ul__li">
                    <span class="header-for-992px__nav__ul__li_span">blogs</span>
                    <ul class="header-for-992px__nav__ul-menu p30 left-410">
                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT TYPES</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Simple</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Color</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Image</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Variable Select</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">External / Affiliate</a>
                          </li>
                        </ul>
                      </li>

                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">PRODUCT</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Promo Text</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Trust Sale</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Countdown</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Featured Video</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
                          </li>
                        </ul>
                      </li>

                      <li class="header-for-992px__nav__ul-menu__li-second">
                        <a href="#" class="header-for-992px__nav__ul-menu__li_a">SHOP LAYOUTS</a>
                        <ul class="header-for-992px__nav__ul-menu__second__ul">
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Pagination</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Ajax Load More</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">List View</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Fullwidth Layouts</a>
                          </li>
                          <li class="header-for-992px__nav__ul-menu__second__ul__li">
                            <a href="#" class="header-for-992px__nav__ul-menu__second__ul__li">Sidebar Layouts</a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </nav>

1 ответ 1

1

У вас просто ошибка в названии события, вам нужно использовать mouseover.

2
  • спасибо, исправил
    – Malfan
    Commented 16 февр. 2023 в 14:34
  • Не за что) если вопрос решен нажмите на галочку рядом с ответом
    – Elmir
    Commented 16 февр. 2023 в 14:36

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.