Heim > Fragen und Antworten > Hauptteil
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>
P粉1945410722024-04-04 12:56:25
由于 css 选择器的特殊性,这不起作用。
.flyout-menu-show 选择器在 .flyout-menu 选择器之前声明,并且它们具有相同的特异性。因此,只有最新的适用于您的元素。
改变
.flyout-menu-show { opacity: 1; visibility: visible; }
至
.flyout-menu.flyout-menu-show { opacity: 1; visibility: visible; }
这将创建一个具有更高特异性的选择器,并且它将被正确应用:)。示例的工作代码笔: https://codepen.io/aSH-uncover/pen/PoaboWo< /a>
可能也值得阅读此页面:https://developer. mozilla.org/en-US/docs/Web/CSS/Specificity