Afficher le menu déroulant à l'aide de l'événement de survol de la souris

Question

J'ai un menu contextuel et j'essaie d'utiliser des événements de survol pour le faire basculer, mais cela ne semble pas fonctionner comme prévu. J'ai essayé d'utiliser les événements de survol CSS en positionnant le div comme ceci : .hero-list-block a:hover + .flyout-menu

Mais ça ne sert à rien. Des suggestions sur la façon de résoudre/améliorer cela ? Merci

const flyoutLink = document.querySelector('.flyout-link');
const flyoutMenu = document.querySelector('.flyout-menu');

flyoutLink.addEventListener('mouseover', () => {
  flyoutMenu.classList.toggle('.flyout-menu-show');
})

.grid-hero-wrapper {
  grid-template-columns: 100px 1fr;
  gap: 15px;
  margin-top: 15px;
  display: grid;
}

.hero-categories-block {
  background: #fff;
  border: 1px solid #28282b;
}

.hero-categories-list {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
  height: 100%;
}

.flyout-menu-show {
  opacity: 1;
  visibility: visible;
}

.flyout-menu {
  background: #fff;
  border: 1px solid #28282b;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 999;
}

.hero-categories-list a {
  display: flex;
  align-items: center;
  flex-grow: 1;
  font-size: 0.75rem;
  height: 22px;
  color: #333;
}

.hero-slider-block {
  position: relative;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="grid-hero-wrapper">
  <div class="hero-categories-block">
    <div class="hero-categories-list">
      <a href="#" class="flyout-link">Flyout</a>
      <a href="#" class="flyout-link">Flyout</a>
    </div>
  </div>
  <div class="hero-slider-block">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active hero-slider-img">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" class="d-block w-100">
        </div>
      </div>
    </div>
    <div class="flyout-menu">
      <h1>This is my flyout menu</h1>
    </div>
  </div>
</div>

Answer 1

En raison des particularités des sélecteurs CSS, cela ne fonctionne pas.

Le sélecteur

.flyout-menu-show est déclaré avant le sélecteur .flyout-menu, et ils ont la même spécificité. Par conséquent, seules les dernières s’appliquent à vos éléments.

Changement

.flyout-menu-show {
  opacity: 1;
  visibility: visible;
}

à

.flyout-menu.flyout-menu-show {
  opacity: 1;
  visibility: visible;
}

Cela créera un sélecteur avec une spécificité plus élevée et il sera appliqué correctement :). Codepen fonctionnel par exemple : https://codepen.io/aSH-uncover/pen/PoaboWo

Cela vaut peut-être également la peine de lire cette page : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity