Блог

Главная - Вопросы по программированию - Как показать subnav в mouseenter скрыть при наведении курсора мыши

Как показать subnav в mouseenter скрыть при наведении курсора мыши

#javascript

#javascript

Вопрос:

Я пытаюсь создать выпадающий subnav в mouseenter класса .subnav-toggle, но не могу понять, как сохранить активный класс, пока мышь находится над subnav, какие-либо предложения или предыдущие примеры?

 var navtoggle = document.querySelector('.subnav-toggle');
var subnav = document.querySelector('.subnav');

navtoggle.addEventListener('mouseover', function() {
  subnav.classList.add('active');
});

navtoggle.addEventListener('mouseleave', function() {
  subnav.classList.remove('active');
});  
 .subnav {
  height: 0px;
  overflow-y: hidden;
  transition: opacity 0.35s ease;
}
.subnav-inner {
  display: flex;
  justify-content: space-between;
  padding: 40px 40px;
  opacity: 0;
}
.subnav.active {
  height: auto;
}
.subnav.active .subnav-inner {
  opacity:1;
  transition: opacity 0.35s ease;
}  
 <header>
  <div class="main-nav">
    <nav>
    <a class="subnav-toggle">Products</a>
    <a href="">About</a>
    <a href="">Contact</a>
    </nav>
  </div>
  <div class="subnav">
    <div class="subnav-inner">
    <a href="">About</a>
    <a href="">Contact</a>
    <a href="">About</a>
    </div>
  </div>
</header>

Ответ №1:

вы должны вставить подменю в тот же класс событий.

 var navtoggle = document.querySelector('.subnav-toggle');
    var subnav = document.querySelector('.subnav');
    
    navtoggle.addEventListener('mouseover', function() {
      subnav.classList.add('active');
    });
    
    navtoggle.addEventListener('mouseleave', function() {
      subnav.classList.remove('active');
    });  
   nav{
    display: inline-flex;
    }
    .subnav-toggle{
        width: 80px;
    }
  nav a {
  width: 80px;

}
.subnav {
    position: absolute;
  height: 0px;
  overflow-y: hidden;
  transition: opacity 0.35s ease;
}
.subnav-inner {
  display: flex;
  justify-content: space-between;
  padding: 40px 40px;
  opacity: 0;
}
.subnav.active {
  height: auto;
}
.subnav.active .subnav-inner {
  opacity:1;
  transition: opacity 0.35s ease;
}  
 <header>
  <div class="main-nav">
    <nav>
    <div class="subnav-toggle">
        <a>Products</a>
        <div class="subnav">
            <div class="subnav-inner">
            <a href="">About</a>
            <a href="">Contact</a>
            <a href="">About</a>
        </div>
    </div>
    </div>  
    <a href="">About</a>
    <a href="">Contact</a>
    </nav>
  </div>
</header>
</html>