Tunjukkan menu flyout menggunakan acara alih tetikus

Question

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>

Answer 1

Disebabkan keanehan pemilih css, ini tidak berfungsi.

Pemilih

.flyout-menu-show diisytiharkan sebelum pemilih .flyout-menu, dan ia mempunyai kekhususan yang sama. Oleh itu, hanya yang terkini digunakan untuk elemen anda.

Ubah

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

kepada

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

Ini akan mencipta pemilih dengan kekhususan yang lebih tinggi dan ia akan digunakan dengan betul :). Codepen berfungsi sebagai contoh: https://codepen.io/aSH-uncover/pen/PoaboWo

Mungkin juga berbaloi membaca halaman ini: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity