Did you know that you can change the look of the standard cursor/mouse pointer with css?

Anyway, I will show you how to do it and what possible cursors you can use.
You can see a table below, move the mouse over the text to see what the different css properties do.

How to change the cursor

The property is called cursor and you give it different attributes to choose what cursor you want for the link You can ofcourse change the cursor for any html tags. You should create a seperate css file and create classes and assign them to html tags. The only reason I write “style=…” inside html is to make it easier to read for you.

<a style="cursor:crosshair">Look... a cross hair</a>
 Move your mouse over this link: Look... a cross hair
The same way you can do with a span or a div:
<div style="cursor:move">Try to move this...</div>

Try to move this... :-)

Different cursors

The text in the table is the word you write after style=”cursor:
Move your mouse over the word to see the result.

auto
crosshair
default
move
hand
help
text
wait
n-resize
s-resize
e-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize

Choose any image for cursor

You can even choose Any cursor you want! Upload your chosen image and write this in your html/css:

<span style=”cursor: url(‘img/myImageFile.gif’)”>This is pretty cool :-) </span>

Unfortunately I can not show you this here, because my cms filters out stuff in a strange way.. but it is just for you to copy this and edit the url for the image. (Don’t forget to upload the image to the server to…)

Similar Posts:

  • Share/Bookmark