본문 바로가기
Html Css

겹친 영역 뒤에 있는 영역 click 이벤트 반응하게 하기

by thecorative 2022. 10. 19.
반응형

https://kyounghwan01.github.io/blog/etc/CSS/dup-area-event/

test {
  z-index: 999;
  /* z-index를 무시하고 겹쳐있는 영역을 클릭했을때 뒤에 있는 click 이벤트 반응하게 하기 */
	pointer-events: none;
  /* HTML 요소에 정의된 이벤트( click, hover, drag, active...등 )를 비활성화한다. */
}

 

 

핸드폰에 이미지가 넘어가도록 하는 슬라이드를 만드는 중

핸드폰 이미지가 위에 있어서 반응을 안하는 상황이 발생했다. 

이럴때 겹쳐있는 영역중 클릭을 죽이고 싶은 클래스에 

 

pointer-events: none; 을 선언해주면 반응을 안하게 된다는것을 알게되었다. 

이미지안에 슬라이드를 넣는경우나 클릭이 필요없는데 위에 있어 아래이미지가

반응을 안할때 써주면 좋을것 같다.

반응형