CSS Cursor:url () custom mouse pointer style for picture

CSS custom mouse pointer style for the use of picture Cursor:url (), today in the project, to use the custom mouse style, format:

Css:{cursor:url (' Picture of Absolute path (format: Cur,ico) '),-moz-zoom-out;} FF below

Css:{cursor:url (' absolute path '), auto;} Ie,ff,chrome Browser is available

The front URL is the custom mouse format, the absolute path address of the image, the following parameters are the CSS standard cursor style, (ie can not be required below)

The format of the icon according to different browsers to divide: IE support Cur,ani,ico These three formats, FF support Bmp,gif,jpg,cur,ico These formats, does not support ANI format, and does not support GIF animation format, so generally save the picture as a cur or ico format is better , in the case of ANI format, you can use Jpg,gif,bmp instead of (Cursor:url (... ani), url (...), auto) under FF.

There are a few places to note: 1. The image address is the absolute path, 2. The image size is best 32*32 size, anyway the size of the resolution under each browser is different

Use of Cursor:url ():

Cursor:url (), pointer;

URL: The URL of the custom cursor you want to use. The picture type needs to be in the. cur or. ani format. (I used the. ico format for this project, and no browser compatibility issues were found)

Pointer: The default mouse cursor style, which is used when no available definition cursor is found.

Recent projects have been useful to set the mouse cursor as a custom picture effect, and have encountered a lot of problems in using Cursor:url ().

Problem one browser incompatibility issue:

In the FF Firefox can be very normal display, and in IE in the first is not displayed, and then the mouse picture size is too small problem, in Google browser mouse picture size problem more prominent-super big.

The situation is exactly the same as the Baidu to the contrary, many of the problems encountered by friends are not compatible with the FF browser.

For problems with the mouse picture not appearing in the browser, the problem is probably on the reference to the mouse picture URL path. You can try a reference to absolute and relative paths, respectively.

Issue two mouse picture size inconsistency between browsers:

This kind of problem should be related to the resolution of the cursor image between browsers, at first my mouse picture size is 59*56, and later the size of the mouse picture changed to 32*32, the picture size inconsistency problem solved.

(This problem occurs when the test finds that it exceeds the 32*32 size)

Issue three mouse flashing issue with cursor URL () in IE:

This behavior occurs when title or Alt is added to the container element that sets the cursor URL (). Finally very helpless to remove the title tag. Is it because the cursor in IE conflicts with the title and alt?

CSS Cursor:url () custom mouse pointer style for picture