cursor: pointer;가 작동하지 않을 때

cursor css 속성이 제대로 적용되지 않는 경우가 종종 있다. 이유가 무엇일까?

 

1) cursor 속성을 적용한 엘리먼트가 다른 요소에 의해 가려진 경우

cursor 속성을 적용한 엘리먼트가 다른 엘리먼트보다 뒷편에 존재하지 않은지 확인한다. 맞다면 z-index값을 높게 조정해서 다른 요소보다 앞으로 오도록 조정한다.

 

2) 그래도 제대로 작동되지 않는다면?

부모나 자신에게 'pointer-events:none;' css  속성이 들어있진 않은지 확인해보라.

 

 

 

+) 여기서 pointer-events란?

pointer-events 는 HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성이다.

 

pointer-events 속성은 11개의 속성값을 가지는데 아래 3개는 HTML 요소에 사용 가능하고, 나머지 값은 SVG 요소에만 사용할 수 있다.

• none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다.
• auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.
• inherit : 부모 요소로부터 pointer-events 값을 상속받는다.

 

bootstrap 등 같은 CSS 프레임워크를 사용한 경우에 나도 모르게 pointer-events 속성이 설정되어 있을 수 있다.

pointer-events 속성값을 'auto'로 설정하면 된다.