포인터 속성에 대한 6가지 소개 공유

사실 저는 이 속성에 대해 오랫동안 알고 있었지만, 연구한 적은 없습니다. 오늘 트위터에서 우연히 이 단어를 보고 연구하러 갔는데, 제가 겪고 있던 작은 문제가 해결되었기 때문에 공유하게 되었습니다. 음, 실제로 이것은 상대적으로 간단한 CSS3 속성입니다. 포인터 속성에 대한 자세한 소개를 살펴보겠습니다.

1. 마우스 침투를 달성하기 위해 CSS의 포인터 이벤트 속성을 사용하는 기술 효과 공유

우선 위 사진은 모 이스트몰 상품목록 페이지 오른쪽 상단에 '폭발적인 가격' 아이콘이 있는 건 다들 아시죠? 절대 위쪽으로 배치하시면 아래 상품 이미지를 덮게 되는 라벨입니다. "쇼크 프라이스" 이미지에 마우스를 가져가시면 뒤에 있는 이미지 링크를 클릭하실 수 없습니다. 물론 이 아이콘에 링크를 추가하면 문제가 해결될 수도 있습니다. (오늘 우리는 그런 간단한 것에 대해 이야기하는 것이 아닙니다. 계속합시다)

최신 브라우저에서 CSS와 JavaScript의 책임 범위는 점점 더 모호해지고 불분명해지고 있습니다. 예를 들어, CSS의 -webkit-touch-callout 속성은 사용자가 iOS에서 풍선 상자를 클릭할 때 풍선 상자가 팝업되는 것을 방지할 수 있습니다. 이 글에서 논의할 포인터 이벤트의 스타일은 JavaScript와 유사합니다.

1. 사용자의 클릭 동작이 어떤 효과도 발생하지 않도록 합니다.
2.
3. CSS의 호버 및 활성 상태 변경이 이벤트를 트리거하는 것을 방지합니다.
4. JavaScript 클릭 동작으로 이벤트가 트리거되는 것을 방지합니다.
하나의 CSS 속성으로 많은 일을 할 수 있습니다!

2. CSS를 사용하여 마우스를 손으로 변경하는 방법 소개 p>

자체 설정된 p 또는 기타 태그에서 더 나은 경험을 위해 슬라이딩 프로세스 중에 마우스가 제스처로 변경됩니다.

해당 CSS 스타일에 대한 간략한 요약입니다.

가 있는 p에 커서:포인터를 추가하면 됩니다.

3. css_html/css_WEB의 포인터 이벤트 속성의 이상한 동작에 대해 - ITnose

내 기억으로는 이벤트 침투에 포인터 이벤트가 사용됩니다. 즉, 상위 요소에 포인터 이벤트가 설정되면 상위 요소는 더 이상 마우스 이벤트를 수신하지 않습니다. (터치, 클릭 등과 유사)

이 작업을 수행해야 하는 상황은 일반적으로 상위 레이어를 "침투"하려는 경우입니다. 하위 요소를 직접 클릭하면 상위 요소는 아무 일도 일어나지 않은 것처럼 작동합니다. 이것은 이전 지식에서 수집한 정보입니다. 지금은 틀린 것 같지는 않지만 불완전합니다.

4. css는pointer-events_html/css_WEB-ITnose 요소의 마우스 이벤트를 보호합니다

// 쉴드 클릭

$('body').css('pointer-events','none');

//기본값 복원

$('body').css('pointer-events','auto');

사용: 레이어를 팝업할 때 또는 작업할 때 다음 요소의 마우스를 설정할 수 있습니다. 고정 위치 이벤트

5 마법의 CSS 속성 포인터-events_html/css_WEB-ITnose

절대 위치에 있는 요소가 링크를 덮거나 이벤트 핸들이 있는 요소가 추가되면 링크의 기본 동작(페이지 점프)이나 요소 이벤트가 발생하지 않습니다.
이제 Firefox3.6+/Safari4+/Chrome은 포인터 이벤트라는 CSS 속성을 지원합니다. 이 속성을 사용하여 절대 위치에 있는 요소를 침투하여 다음 요소의 특정 동작을 트리거할 수 있는지 여부를 결정하세요

6 커서 마우스 스타일??Attribute_html/css_WEB-ITnose

DIV CSS를 레이아웃할 때 객체 내에서 마우스 포인터를 제어하는 ​​문제에 직면하게 됩니다. 예를 들어 마우스가 포인터를 통과하여 손가락 모양으로 변할 때 마우스 포인터 스타일의 커서 컨트롤을 소개하겠습니다. 시스템 기본 마우스 포인터 스타일 외에도 CSS를 통해 이미지를 마우스 포인터로 설정할 수 있습니다. 일부 웹사이트에서는 마우스 포인터에 대한 다양한 작은 이미지 스타일을 사용하는 것이 일반적입니다. CSS 커서.

포인터 속성 관련 질문 및 답변:

1. a href ="http://www.php.cn/wenda/60150.html" target="_self">css3 포인터 이벤트에 대한 질문: 없음 속성

2. = "http://www.php.cn/wenda/98428.html" target="_self">objective-c - RAC: 호환되지 않는 블록 포인터 유형 전송

【관련 권장사항】 p >

1. php.cn Dugu Jiujian (2) - CSS 동영상 튜토리얼 p>

2.firefox_기본 튜토리얼에서 손 모양을 표시하기 위한 CSS 포인터 제어 코드

위 내용은 포인터 속성에 대한 6가지 소개 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!