Tunjukkan menu flyout menggunakan acara alih tetikus
Saya mempunyai menu timbul dan saya cuba menggunakan acara alih tetikus untuk menogolnya tetapi ia nampaknya tidak berfungsi seperti yang diharapkan. Saya cuba menggunakan acara CSS hover dengan meletakkan div seperti ini: .hero-list-block a:hover + .flyout-menu
Tetapi tiada gunanya. Sebarang cadangan tentang cara untuk membetulkannya/memperbaiki ini? Terima kasih
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>
