CSS custom mouse pointer style, css custom mouse pointer

CSS custom mouse pointer style, css custom mouse pointer
Link: http://davidwalsh.name/css-custom-cursor
Demo address: http://davidwalsh.name/demo/css-custom-cursor.php
Original Article Date:
Translated on:
Translated by: Tie

Do you still remember the hard times of the Web 1.0 age? You do everything you can to optimize your website. I still have to suffer from the brutal abuse of IE6. For example, I always remember the third-party class library CometCursor, the scroll bars in IE that killed people not to pay the candle. cometCursor is very powerful, mainly used to create and load custom mouse and cursor styles. Now you may think that the original implementation methods are very old, but sometimes you need to customize the cursor pattern, So let's take a look at how CSS is implemented, It's So Easy, no point anywhere!

CSS code

The cursor attribute in CSS can be separated by commas to specify a series of cursor items. You can use url () to customize the pattern of the cursor:

body {cursor: url('some-cursor.ico'), default;}

In practical applications, it is best to add a back-up Native cursor to the back, such Default, And set the font ( Font-familyStyle is the same.
Note that Firefox will crop the cursor to a smaller proportion, while Chrome now supports a larger Icon size.

Don't hesitate. Add the custom pointer icon in the important part, just like the zoom-in (+) and zoom-out (-) buttons when viewing the album preview. You certainly want to make a difference.


How to Use CSS to customize the mouse pointer

As we all know, you can modify the mouse pointer Display Effect in windows. These pointers are stored in the cursors directory of windows. They are image files ending with. cur and. ani. In fact, such Icons can also be referenced in webpages. Sometimes, when you open some web pages, the mouse pointer turns into some strange small icons. This is the result of customizing the mouse pointer using CSS.

JS dynamic the table mouse style, move the mouse over the image, the mouse pointer turns into a magnifier shape

You can use css to control
. Class {cursor: url ('path'), auto;} cursor supports custom icons
You only need to define the style of the element, and the path can be loaded.
However, considering the compatibility of IE, it is best to use files in ico or cur format with a resolution of 32 × 32.