Basic CSS Cursors

Below you will learn how to add CSS
cursors to your existing website.
We have used an example of this script
as you can see it here on this page.

Welcome to cursor.com
Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS.

Although the cursors will not have the customized look in other browsers it usually doesn't ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all.

So unless the page really doesn't work without the customized cursor there shouldn't be technical reasons for choosing not to.

However there might be other reasons for thinking twice before adding custom cursor to your pages. Many users are easily confused or irritated when a site breaks the standard user interface.


CURSOR PROPERTIES

Look Values Look NS IE Example
cursor-sample
 default TEST 6+ 4+ cursor:default
cursor-sample
 crosshair TEST 6+ 4+ cursor:crosshair
cursor-sample
 hand TEST 4+ cursor:hand
cursor-sample
 pointer TEST 6+ cursor:pointer
cursor-sample
 Cross browser TEST 4+ cursor:pointer;cursor:hand
cursor-sample
 move TEST 6+ 4+ cursor:move
cursor-sample
 text TEST 6+ 4+ cursor:text
cursor-sample
 wait TEST 6+ 4+ cursor:wait
cursor-sample
 help TEST 6+ 4+ cursor:help
cursor-sample
 n-resize TEST 6+ 4+ cursor:n-resize
cursor-sample
 ne-resize TEST 6+ 4+ cursor:ne-resize
cursor-sample
 e-resize TEST 6+ 4+ cursor:e-resize
cursor-sample
 se-resize TEST 6+ 4+ cursor:se-resize
cursor-sample
 s-resize TEST 6+ 4+ cursor:s-resize
cursor-sample
 sw-resize TEST 6+ 4+ cursor:sw-resize
cursor-sample
 w-resize TEST 6+ 4+ cursor:w-resize
cursor-sample
 nw-resize TEST 4+ 4+ cursor:nw-resize

cursor-sample
 progress TEST 6+ cursor:progress

cursor-sample
 not-allowed TEST 6+ cursor:not-allowed

cursor-sample
 no-drop TEST 6+ cursor:no-drop

cursor-sample
 vertical-text TEST 6+ cursor:vertical-text

cursor-sample
 all-scroll TEST 6+ cursor:all-scroll

cursor-sample
 col-resize TEST 6+ cursor:col-resize

cursor-sample
 row-resize TEST 6+ cursor:row-resize

cursor-sample
 cursor:url(uri) TEST   6+ cursor:url(uri)

4P:problems, 4M:Mac only, 4W:Windows only


ADDING A CUSTOMIZED CURSOR

The syntax for a customized cursor is this:
(Position the mouse over each link to see the effect)

Selector {cursor:value}

For example:

<html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>

<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>


REDEFINING THE CURSOR FOR ENTIRE PAGES

If you want to redefine the cursor so that it's not only showing up when moved over a link, you simply specify the desired cursor using the body-selector.

For example:

<html>
<head>
<style type="text/css">
body {cursor:crosshair}
</style>
</head>

<body>
<b>
SOME TEXT
<br>
<a href="mypage.htm">ONE LINK</a>
<br>
<a href="mypage.htm">ANOTHER LINK</a>
</b>
</body>
</html>


REDEFINING THE CURSOR FOR AREAS ON A PAGE

If you want one look of the cursor in one area of the page and another look of the cursor in another area you can do it with context dependant selectors.

This way, you create different styles for links, that are dependant on the context. Now if the context is set with a dummy tag, such as <span> you don't have to specify the desired style each and every time there is a link in the section.

For example:

perl mysql php web host --> <html>
<head>
<style type="text/css">
.xlink A{cursor:crosshair}
.hlink A{cursor:help}
</style>
</head>

<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
<a href="mypage.htm">CROSS LINK 2</a><br>
<a href="mypage.htm">CROSS LINK 3</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
<a href="mypage.htm">HELP LINK 2</a><br>
<a href="mypage.htm">HELP LINK 3</a><br>
</span>
</b>
</body>
</html>

 

Copyright 2004, Cursor.com, All Rights Reserved