마우스 오버 이벤트를 사용하여 플라이아웃 메뉴 표시

Question

팝업 메뉴가 있고 마우스 오버 이벤트를 사용하여 전환하려고 하는데 예상대로 작동하지 않는 것 같습니다. 다음과 같이 div의 위치를 ​​지정하여 CSS 호버 이벤트를 사용해 보았습니다. .hero-list-block a:hover + .flyout-menu

하지만 소용없어요. 이 문제를 해결하거나 개선하는 방법에 대한 제안이 있으십니까? 감사합니다

으아아아 으아아아 으아아아

Answer 1

CSS 선택기의 특성으로 인해 작동하지 않습니다.

.flyout-menu-show 선택기는 .flyout-menu 선택기보다 먼저 선언되며 동일한 특이성을 갖습니다. 따라서 최신 항목만 요소에 적용됩니다.

변화

으아아아

to

으아아아

이것은 더 높은 특이성을 가진 선택기를 생성하고 올바르게 적용됩니다 :). 작동 중인 코드펜 예: https://codepen.io/aSH-uncover/pen/PoaboWo< /a>

다음 페이지도 읽어볼 가치가 있습니다: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity