Flyout-Menü mit Mouseover-Ereignis anzeigen
Ich habe ein Popup-Menü und versuche, Mouseover-Ereignisse zu verwenden, um es umzuschalten, aber es scheint nicht wie erwartet zu funktionieren. Ich habe versucht, CSS-Hover-Ereignisse zu verwenden, indem ich das Div wie folgt positioniert habe: .hero-list-block a:hover + .flyout-menu
Aber es nützt nichts. Irgendwelche Vorschläge, wie man das Problem beheben/verbessern kann? Danke
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>
