[ CSS ] parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기

📍 parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기

제목이 어려울 수 있지만 background: transparent인 Parent Div 밑에 clickable 할 수 있는 Child div가 있을 때 클릭하는 방법을 작성하려고 한다.

 

기존에는 부모 Div만 클릭 할 수 있어 자식 Div는 클릭할 수 없었지만 css의 pointer-events 속성을 이용하여 해결 할 수 있었다. 글로 이해하기 힘들다면 하단의 그림을 보자.(그림은 발(🦶🏾)로 그렸다.)

 

 

내가 해결한 방법은 부모 Div에 pointer-events: none을 주고, clickable 할 target Div에 pointer-events: all을 주자. 추가로 pointer-events는 모든 브라우저에 지원되는 속성이다.

728x90

하단 CodePen에 당시 상황을 동일하게 구현하려 했으나 AS-IS를 완벽하게 구현하지 못해 unclickable에 임의로 pointer-events: none을 줬다. 여기에 초점을 맞추는 대신 clickable에 pointer-events: all을 줌으로써 부모 Div에 의해 클릭이 불가능한 컴포넌트에도 clickable 할 수 것에 초점을 맞추면 된다.

 

See the Pen pointer-events by an (@YWTechIT) on CodePen.

Reference

• pointer-events - MDN