cursor cursor style is replaced by pictures

The mouse cursor style is limited, please refer to it. You can customize the cursor style by setting cursor:url('xxx.cur',auto;), but it always does not take effect. I don’t know why. then what should we do? Another way is to use a picture to replace the mouse cursor. Here's how to use it.

1. Make a cursor picture (PS and other tools), be careful not to use a white background, use a transparent background. The transparent background is usually a gif or png format image.

Picture 1 The arrow picture I made is 32*32px

2. Use a span tag to include it Picture

<span style="color: #0000ff"><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('left_right_arrow_32.gif');cursor:none;pointer-events:none"</span><span style="color: #0000ff">><br></span><span style="color: #800000">span</span><span style="color: #0000ff">></span></span>

Style attribute explanation

display:none is not displayed initially

position:absolute Absolute positioning, control the position with left and top, relative inclusion (position: relative/absolute) The position of the parent element positioned in this way. If no such parent element can be found, it will be relative to the body

z-index:9998 layer height. The higher it is, the less it will be blocked. The highest Set the same width and height as the picture for 2147483647

width,height

background-imageSet the picture

cursor:none The mouse cursor is not displayed

pointer- events:none does not respond to mouse events. Events can penetrate this layer and thus will not affect the response of underlying elements to mouse events

3. Replacement of mouse cursor

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

The above is the detailed content of cursor cursor style is replaced by pictures. For more information, please follow other related articles on the PHP Chinese website!