[css] CSS - pointer-events 속성 - 마우스이벤트에 대한 반응 여부 (= pointer-events속성 = 포인터이벤츠속성) ※ 이벤트 작동 여부 제어

목차

1. pointer-events 예제 - 마우스 이벤트에 대한 반응 여부
2. pointer-events 정의
3. pointer-events 구문

pointer-events 예제 - 마우스 이벤트에 대한 반응 여부

 

<style>

div {margin:5px;}

.a {pointer-events: none;}

.b {pointer-events: auto;}

</style>

<div class="a">

    <a href="https://homzzang.com/b/HTML" target="_blank">HTML 강의</a>

</div>

<div class="b">

    <a href="https://homzzang.com/b/css" target="_blank">CSS 강의</a>

</div>

 

결과보기

pointer-events 정의

 

요소가 마우스 포인터 이벤트에 대한 반응 여부 지정.

 

---

 

1.

• 기본값: auto
• 상속여부: O
• 애니효과: X
• CSS버전: CSS3
• JS구문: object.style.pointerEvents="none"

 

2.

IE11 이상 주요 최신 브라우저 지원.

 

3. MDN pointer-events 예제보기

https://developer.mozilla.org/ko/docs/Web/CSS/pointer-events

 

pointer-events 구문

 

selector {pointer-events: auto|none|initial|inheret;}

 

---

[속성값]

 

auto

요소가 포인터 이벤트에 반응 O. (기본값)

(예: hover, click)

 

none

요소가 포인터 이벤트에 반응 X.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.