How to change cursors on web pages

The “cursor” property of css allows you to change the mouse cursor either for the complete page or for specific elements

The following example illustrates the use of the “cursor” property of css:

'
//This changes the cursor for the complete page
body {
cursor:url(cursor.cur);
}

//This changes the cursor only for the element of class fancy
.fancy{
cursor:url(fancy_cursor.ani);
}
'


Cursors are files with extension .cur or .ani (for animated cursor ),there are many sites which give you free animated and non animated cursors for download, even there are freewares which let you create your own custom cursors.
Furthermore, instead of specifying the url of the cursor file you can specify the type/style of cursor which comes inbuilt on most systems.

For example, cursor:pointer will cause the cursor to change to a pointer (as on hyperlinks) and cursor:help will give you a small question mark.

Below is a complete list of the cursor types you can use, move the cursor over a word to see it change

Auto

Crosshair

Default

Pointer

Text

Wait

Help

Move

E-resize

N-resize

NW-resize

SE-resize

SW-resize

S-resize

W-resize

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2019 All rights reserved | Powered by WordPress
Back to top
Theme by dynamicguru.com