Cursor: Use of URL ()

Source: Internet
Author: User

Custom mouse style, format:
CSS: {cursor: URL ('absolute path image (Format: cur, ico )'), -Moz-zoom-out;} // FF
CSS: {cursor: URL ('absolute path'), auto;} // IE, FF, chrome can all be used.
the preceding URL is a custom mouse format and the absolute path address of the image. The following parameter is the CSS standard cursor style. (This is not required in IE)
the icon format varies with browsers: IE supports the cur, Ani, and ICO formats. FF supports BMP, GIF, JPG, cur, and ICO formats, the ani format is not supported, and the GIF animation format is not supported. Therefore, it is better to store images in the cur or ICO format. If it is an ANI format, JPG can be used under ff, GIF, BMP instead (cursor: url(.....ani), url(......gif), auto)
there are several Notes: 1. the image address is an absolute path, 2. the image size is preferably 32*32. The resolution size is different in different browsers.

usage of cursor: URL ():
cursor: URL (), pointer;
URL: the URL of the custom optical indicator to be used. The image type must be in. cur or. Ani format. (I used this project. ICO format, no browser compatibility issues found)
pointer: the default mouse and cursor style. This cursor is used when no available definition labels are found.
In recent projects, you have used the special effect of setting the mouse cursor to a custom image. You have encountered many problems when using cursor: URL.
problem 1: browser incompatibility:
it can be displayed normally in FF Firefox, but cannot be displayed in IE at first, later, the problem was that the size of the mouse image was too small. In the Google browser, the size of the mouse image was more prominent-the size of the super large.
the problem is the opposite of that of Baidu. Many of my friends are not compatible with the FF browser.
the problem that the mouse image is not displayed in the browser is probably caused by the reference to the URL path of the mouse image. You can try to reference the absolute and relative paths respectively.
problem 2: inconsistent mouse and image sizes between browsers:
this problem should be related to the resolution of cursor images between browsers, at first, the size of my mouse image was 59*56, and then I changed the size of the mouse image to 32*32. Then the problem of inconsistent image size was solved.
(this problem occurs when the size exceeds 32*32)
problem 3: Use cursor URL () in IE to flash the mouse:
This problem occurs when title or ALT is added to the container element that sets cursor URL. Finally, I reluctantly removed the title tag. Is it because cursor conflicts with title and ALT in IE?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.