반응형
:has()
선택자를 이용해 다른 요소가 특정 상태일 때 다른 요소의 스타일을 제어
.bottom-btn 은 .menu가 .active 가 붙었을 때 사라진다.
즉, 메뉴가 열리면 버튼이 사라지는 CSS 이다.
css
/* 기본 상태: 버튼 보임 */
.bottom-btn {
opacity: 1;
pointer-events: auto;
transition: opacity 0.3s ease;
}
/* 메뉴가 열린 상태를 감지해 버튼 숨김 */
body:has(.menu.active) .bottom-btn {
opacity: 0;
pointer-events: none;
}
html
<body>
<div class="menu">
<!-- 메뉴 내용 -->
</div>
<button class="bottom-btn">하단 버튼</button>
</body>반응형
'웹개발' 카테고리의 다른 글
| 화면에서 버튼권한 처리하기 (0) | 2024.08.20 |
|---|---|
| 웹화면에서 텍스트 복사가 불가능할 때 (0) | 2024.06.07 |
| 참고 사이트 정리 (0) | 2024.06.07 |
| 코딩 컨벤션 (0) | 2024.06.07 |