이 글에서는 CSS pointer-events 속성을 사용하는 방법에 대해 자세히 설명합니다.
포인터 이벤트 속성이란 무엇입니까?
CSS ' 포인터 이벤트 ” 속성은 HTML 요소에 대한 포인터/탭 동작과 선택한 요소가 호버 또는 클릭과 같은 작업을 수행하여 응답할지 여부를 지정합니다.
포인터 이벤트 속성을 사용하는 방법?
CSS에서 pointer-events 속성은 특정 HTML 요소에 대한 포인터 동작을 활성화하거나 비활성화하는 데 사용할 수 있습니다. pointer-events 속성의 구문은 다음과 같습니다.
통사론
포인터 이벤트 : 없음 | 자동 ;
언급된 구문에서 ' 자동 '는 pointer-events 속성의 기본값이며 요소에 대한 포인터 동작을 활성화하고 ' 없음 '는 auto와 완전히 반대입니다. HTML 요소에 대한 포인터 동작을 비활성화합니다.
포인터 이벤트 속성을 이해하기 위해 예를 들어 보겠습니다.
실시예 1
HTML 파일에서 ' 리눅스힌트.io '를 입력하고 본문 섹션에 배치합니다.
HTML
< ㅏ href = 'https://www.linuxhint.io/' > 리눅스힌트.io < / ㅏ >이제 ' 포인터 이벤트 ” 속성에 값을 할당합니다. 없음 '. 이렇게 하면 요소에 대한 포인터 동작이 비활성화됩니다.
CSS
ㅏ {포인터 이벤트 : 없음 ;
}
언급된 코드로 HTML 파일을 저장하고 브라우저를 사용하여 실행합니다.
포인터 이벤트 속성을 자세히 다루기 위해 다른 예를 들어 보겠습니다.
실시예 2
포인터 이벤트 속성 값을 ' 자동 ' 이 시간. 포인터를 가리키거나 클릭하면 요소가 응답합니다. 그럼에도 불구하고 auto는 pointer-events 속성의 기본값입니다.
CSS
ㅏ {포인터 이벤트 : 자동 ;
}
산출
CSS pointer-events 속성의 다양한 용도를 다루었습니다.
결론
포인터 동작을 제어하기 위해 CSS ' 포인터 이벤트 ' 재산. ' 자동 ” 값은 이 속성의 미리 정의된 값입니다. HTML 요소에 대한 작업을 활성화합니다. pointer-events 속성이 '값과 함께 사용되는 경우 없음 ', 특정 요소에 대한 작업을 비활성화합니다. 이 글은 CSS pointer-events 속성을 사용하는 방법을 보여주었습니다.