이미지 확대를 위한 맞춤 커서 이미지
기본 커서를 돋보기 등의 맞춤 이미지로 교체하여 사용자 경험을 향상하려는 경우 특정 이미지 요소 위로 마우스를 가져가면 CSS가 솔루션을 제공할 수 있습니다. 그러나 예상치 못한 동작이 발생할 수 있습니다.
설명된 인스턴스에서는 커서 URL이 CSS를 사용하여 정의됩니다.
a.heroshot img { cursor:url(/img/magnify.cur), pointer; }
magnify.cur 커서가 올바른 위치에 있더라도 이 코드는 비효율적으로 렌더링됩니다. 문의에 따르면 이 동작은 Mac 플랫폼의 Firefox와의 호환성 문제로 인해 발생하는 것으로 나타났습니다. Firefox의 경우 JavaScript 솔루션 또는 대체 접근 방식이 필요합니다.
Firefox 호환성
Firefox의 경우 커서 URL 메커니즘이 지원되지 않습니다. 대안으로, "-moz-zoom-in" 키워드를 사용하여 비슷한 효과를 얻을 수 있습니다.
cursor:url(/img/magnify.cur), -moz-zoom-in, auto;
이 수정을 통해 Firefox는 magnify.cur 표시를 우선시하고 그 다음 Mozilla 관련 항목을 표시합니다. 확대/축소 커서 또는 대체 시스템 커서.
브라우저 호환성
커서 키워드 및 지원은 브라우저마다 다릅니다. 포괄적인 참조를 위해서는 다양한 브라우저에 대해 호환되는 커서 키워드를 자세히 설명하는 원래 답변에 제공된 링크된 리소스를 참조하세요.
위 내용은 이미지 확대를 위한 내 사용자 정의 커서 이미지가 Firefox에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!