Firefox 및 Chrome에서 사용자 정의 CSS 커서가 작동하지 않음
CSS로 커서를 사용자 정의하면 독특하고 매력적인 시각적 피드백을 제공하여 사용자 경험을 향상할 수 있습니다. . 그러나 불일치를 방지하려면 브라우저 간 호환성을 보장하는 것이 중요합니다.
특정 시나리오에서는 다음 코드를 사용하여 사용자 정의 커서를 생성합니다.
<code class="css">body { cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'); }</code>
이 코드는 작동할 수 있습니다. 특정 브라우저에서는 Firefox 및 Chrome에서 문제가 발생합니다. 근본적인 이유는 코드에 두 번째 인수가 없을 뿐만 아니라 이미지 자체의 크기 때문이기도 합니다.
이미지 크기를 32px와 같이 더 작은 크기로 조정하면 사용자 정의 커서가 제대로 작동할 수 있습니다. 또한 이미지의 모양을 고려하여 "auto" 대신 "pointer"를 지정하는 것이 좋습니다.
<code class="css">cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;</code>
참고: 사용자 정의 커서를 사용하는 동안 원본 이미지 크기를 유지하는 것은 불가능합니다. 모든 브라우저에서 지원됩니다. 이 제한 사항에 대한 자세한 내용은 커서 속성에 대한 Mozilla 개발자 네트워크 설명서를 참조하세요.
위 내용은 내 사용자 정의 CSS 커서가 Firefox 및 Chrome에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!