Detailed description of css cursor url Usage format, csscursor

Detailed description of css cursor url Usage format, csscursor

Css cursor url format:Css: {cursor: url ('icon path'), auto;} // IE, FF, chrome

Instance code:Html {cursor: url ("http://ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"), auto ;}

Resolution:The previous url is a custom Mouse icon path, and the 2nd Parameter auto is the css standard cursor style, which can be changed to other attributes (such as pointer/default )!
(Note: A common cursor must be defined for the 2nd parameter recommended by w3school, in case the available cursor defined by the URL can be used for backup! In addition, 2nd parameters can be omitted in IE)

 

Pay attention to the following issues when customizing the Mouse icon

Icon format:

IE supports the cur, ani, and ico formats. FF supports bmp, gif, jpg, cur, and ico formats. It does not support the ani format or gif animation format, therefore, it is better to save the image referenced by the url in ico or cur format!

Icon size:

The recommended size of the mouse image is 32*32. Otherwise, the Icon size may be inconsistent!

In addition, for the problem that the mouse image is not displayed in the browser, most of the problem lies in the reference of the URL path of the mouse image. You can try to reference the absolute and relative paths respectively.

The possible values of the cursor attribute are attached. (all mainstream browsers support the following cursor attributes)

Value	Description
Url	The URL of the custom optical indicator to be used. Note: always define a normal cursor at the end of this list to prevent any available cursor defined by the URL.
Default	Default cursor (usually an arrow)
Auto	Default value. The cursor set by the browser.
Crosshair	The cursor is displayed as a cross line.
Pointer	The cursor is a pointer indicating the Link (one hand)
Move	This cursor indicates that an object can be moved.
E-resize	This cursor indicates that the edge of the rectangle can be moved to the right (East.
Ne-resize	This cursor indicates that the edge of the rectangle box can be moved up and right (North/East ).
Nw-resize	This cursor indicates that the edge of the rectangle can be moved up and left (North/West ).
N-resize	This cursor indicates that the edge of the rectangle box can be moved up (North.
Se-resize	This cursor indicates that the edge of the rectangle box can be moved down and to the right (South/East ).
Sw-resize	This cursor indicates that the edge of the rectangle can be moved down and left (South/West ).
S-resize	This cursor indicates that the edge of the rectangle box can be moved down (North/West ).
W-resize	This cursor indicates that the edge of the rectangle can be moved to the left (West ).
Text	This cursor indicates the text.
Wait	This cursor indicates that the program is busy (usually a table or hourglass ).
Help	This cursor indicates available help (usually a question mark or a balloon ).