[CSS] 이벤트(마우스 클릭, 호버, ...) 통과시키기

미리보기

 

 

배경

프론트엔드 개발 시 전체 화면에 폭죽 애니메이션이 실행되는 요소처럼 화면 최상단에 위치하고 화면 전체를 차지하는 요소를 사용해야하는 상황이 있습니다. (이하 최상위 요소로 표현합니다.)

이 때, 최상위 요소는 최상단에 위치하며 화면 전체를 차지하고 있기 때문에 최상위 요소 뒷부분의 요소들을 클릭하고 싶어도 모든 이벤트가 가로막히게 됩니다.

이에 최상위 요소를 뚫고 이벤트(클릭 등)를 통과시키는 기능이 필요하며 이는 최상위 요소 css에 아래 속성을 추가하여 간단하게 구현할 수 있습니다.

 

 

코드

// 아래 속성을 최상위 요소에 삽입합니다.
pointer-events: none;

// 예시
<div style={{ pointerEvents: "none" }}>
  안녕? 나 최상위 요소 ^-^
</div>