커서 커서 스타일이 그림으로 대체됩니다.

마우스 커서 스타일은 제한되어 있으니 참고하세요.cursor:url('xxx.cur',auto;)를 설정하여 커서 스타일을 맞춤 설정할 수 있지만 항상 적용되지는 않습니다. . 무엇을 해야 할까요? 또 다른 방법은 그림을 사용하여 마우스 커서를 대체하는 것입니다.

1. 커서 그림을 만듭니다(PS 및 기타 도구). 흰색 배경을 사용하지 않도록 주의하세요. 투명한 배경을 사용하세요. 투명한 배경은 일반적으로 gif 또는 png 형식의 이미지입니다.

그림 1 제가 만든 화살표 그림은 32*32px입니다

2 그림을 포함하려면 스팬 태그를 사용하세요

<span style="color: #0000ff"><</span><span style="color: #800000">span </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="cursorLRArrow"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="display:none;position:absolute;z-index:9998;width:32px;height:32px;background-image:url(&#39;left_right_arrow_32.gif&#39;);cursor:none;pointer-events:none"</span><span style="color: #0000ff">><br></</span><span style="color: #800000">span</span><span style="color: #0000ff">></span>

스타일 속성 설명

display:none은 처음에는 표시되지 않습니다.

위치:절대 위치 지정(위치: 상대/절대)을 포함하는 상위 요소의 위치를 ​​기준으로 왼쪽 및 위쪽을 사용하여 위치를 제어합니다. 이러한 위치 지정을 찾을 수 없는 경우 본문을 기준으로 합니다.

z-index: 9998 레이어 높이, 높을수록 높이는 차단되지 않으며 최대값은 2147483647입니다.

width,height 사진과 동일한 너비와 높이를 설정하세요

Background-image 사진을 설정

cursor:none 마우스 커서가 표시되지 않습니다

pointer-events:none은 마우스 이벤트에 응답하지 않습니다. 이벤트가 이 레이어에 침투할 수 있으므로 마우스 이벤트에 대한 기본 요소의 응답에 영향을 주지 않습니다

3. 마우스 커서 교체

$('body').mousemove( x = e.pageX;  y = e.pageY; ).css('cursor','none''#cursorLRArrow''inline-block'-15)+'px'-10)+'px''#cursorLRArrow'

위 내용은 커서 커서 스타일이 그림으로 대체됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!