"포인터 이벤트: 없음"을 사용하여 링크 상호 작용을 비활성화하는 동안 커서 스타일을 유지하는 방법은 무엇입니까?

"pointer-events: none"으로 커서 스타일 유지

"pointer-events: none"을 사용하여 링크의 상호 작용을 비활성화하면 다음과 충돌할 수 있습니다. 커서 속성이 변경됩니다. 이는 "pointer-events: none"이 커서 변경을 포함하여 요소와 모든 마우스 상호 작용을 방지하기 때문입니다.

이 문제를 해결하려면 링크 자체 대신 상위 요소에 커서 속성을 적용할 수 있습니다. 이렇게 하면 링크의 비활성화된 상호 작용을 유지하면서 커서 변경 사항이 적용됩니다.

예:

<code class="html"><span class="wrapper">
    <a href="#">Some Link</a>
</span></code>

<code class="css">.wrapper {
    position: relative;
    cursor: text;  /* This is used */
}
.wrapper a {
    pointer-events: none;
}</code>

그러나 특정 브라우저 불일치가 존재합니다. . IE11과의 호환성을 보장하려면 의사 요소를 추가해야 할 수도 있습니다.

<code class="css">.wrapper:after {
    content: '';
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
}</code>

이 의사 요소를 사용하면 Firefox에서 텍스트 선택이 가능하고 상호작용 비활성화 없이 Chrome에서 커서를 변경할 수 있습니다.

위 내용은 "포인터 이벤트: 없음"을 사용하여 링크 상호 작용을 비활성화하는 동안 커서 스타일을 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!