The cursor property specifies the type of cursor to be displayed when pointing on an element. Some CSS properties are animatable, meaning that they can be used in animations and transitions.

Animatable properties can change gradually from one value to another, like size, numbers, percentage and color.

Now, when you’d like to customize a cursor, and CSS lets you do it quite easily! Click here for a list of the cursor styles supported by the CSS W3C recommendations.

CSS Custom Cursors
Rollover on the above image and see the CSS custom Cursor

 

The CSS

The cursor CSS property accepts a series of cursors, and using a url() value allows you to set a custom CSS cursor:

.heart {
          cursor:url('http://demo.web3designs.com/img/heart.ico'), default;
}

It’s always best to have a backup native cursor like default, much as you set broader font-family‘s when styling text.  Also note that Firefox scales the cursor down to a smaller size whereas Chrome currently allows a larger original size.

Now don’t go doing this willy nilly, use a custom cursor in places where you think important, like a magnifying glass + or – over zoom-able images and such.

JavaScript

If you want to change the cursor property with JavaScript then use,

object.style.cursor="crosshair"

Conclusion

That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas. Thanks for reading!

You can support this website by sharing. Thank you!DhirajCSS - Cascading Style SheetsHTMLMobile Web TechnologyPhotoshopTutorialsadvance web technology,angle brackets,animation direction,change cursor,configurable settings,CSS,CSS 3,CSS 4,css cursor property,CSS framework,css namespaces,css3,css3 box shadow,cursor changer,cursor css,cursor css image,cursor pointer,custom cursor,customize cursor,doctype html,graphical user interface,html and xhtml,html basics,html5,javascript functions,mobile,visual transitionThe cursor property specifies the type of cursor to be displayed when pointing on an element. Some CSS properties are animatable, meaning that they can be used in animations and transitions. Animatable properties can change gradually from one value to another, like size, numbers, percentage and color. Now, when you'd like...Web design / development tutorials covering HTML, jQuery & CSS. Cool tips and tricks of web designing using HTML5, CSS3 & jQuery Library. Latest updates in responsive or mobile web technology.