CSS: Continuing the Clarification of CSS Classification - Changing the Way You Curse
(Page 3 of 4 )
You can determine the way a cursor looks when it goes over an element. There are many types of cursors, and they will each be displayed in the code below. Give them a try:
<html>
<body>
<h1>To see what each cursor style does, hover your mouse over them:</h1>
<p style="cursor:auto">
Auto</p>
<p style="cursor:crosshair">
Crosshair</p>
<p style="cursor:default">
Default</p>
<p style="cursor:pointer">
Pointer</p>
<p style="cursor:text">
Move</p>
<p style="cursor:e-resize">
e-resize</p>
<p style="cursor:ne-resize">
ne-resize</p>
<p style="cursor:nw-resize">
nw-resize</p>
<p style="cursor:n-resize">
n-resize</p>
<p style="cursor:se-resize">
se-resize</p>
<p style="cursor:sw-resize">
sw-resize</p>
<p style="cursor:s-resize">
s-resize</p>
<p style="cursor:w-resize">
w-resize</p>
<p style="cursor:move">
text</p>
<p style="cursor:help">
wait</p>
<p style="cursor:wait">
help</p>
</body>
</html>
You can also use a custom cursor by using url, as shown below:
h1
{
cursor: url(“sample.cur”),url(“backup.cur”), default
}
Note that in the above example we put default as the cursor type, just in case our other cursors do not show up.
Next: Attack of the Invisible Man >>
More Style Sheets Articles
More By James Payne
