How to change the default cursor via CSS in HTML

For specific cursor requirements CSS offers the property cursor, which allows you to specify which type should appear when the mouse is hovered over an element. Here then is an introduction to the different types, including mouseover examples.

cursor:default

Setting the cursor to default will as the word says give you a default curser. Nothing special or awe inspiring here.



cursor:pointer

Usually the pointer is encountered when hovering over or clicking on a link. Calling on a pointer style curser therefore is especially useful when working with div elements, that call upon JavaScript functions, whilst at the same time having a link quality.



cursor:crosshair

If I remember correctly the crosshair cursor was used a lot during the early 90s. Now days I can't really see much point in it. Unless you are developing a duck shooting JavaScript game that is.



cursor:progress

If a JavaScript function takes a while to load after it has been called upon, this will be the cursor to use.



cursor:wait

Similar to progress, the difference being that only the hour glass is displayed. The accompanying arrow is left away.



cursor:help

Ideal for question boxes where a div element pops up with an in-depth explanation.



cursor:move

Thanks to AJAX, and the ability to drag and drop divs and other elements around this curser can come in very handy. Ideal if you are looking to make your web application look like a desktop environment.



cursor:text

Text gives you the standard line that appears when you place your mouse over content. Nothing spectacular.



Resize

Depending on where the mouse is placed you can not only demand the resize curser, but also the direction that it points to. The curser e-resize therefore equals east, n equals north, and ne equals north east.











cursor:url('curserURL')

Last but not least you can specify your own curser creations. Note that this property might not work on every browser on the planet!