Afficher le menu déroulant à l'aide de l'événement de survol de la souris
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>
