Difference between revisions of "CSS GUIDE CURSOR"

From CDOT Wiki
Jump to: navigation, search
(Legal Values)
(Usage Examples)
Line 96: Line 96:
  
 
== Usage Examples ==
 
== Usage Examples ==
 
 
  <html>
 
  <html>
  <head>
 
  <style type="text/css">
 
    b
 
    {
 
      font-size: 25px;
 
      float:right;
 
    }
 
  </style>
 
  </head>
 
 
   <body>
 
   <body>
   <nowiki>
+
   <span style="cursor:auto">
   <p>
+
   Auto</span><br />
    <b>HELLO!</b>
+
  <span style="cursor:crosshair">
    This is some text. This is some text. This is some text.
+
  Crosshair</span><br />
    This is some text. This is some text. This is some text.
+
  <span style="cursor:default">
    This is some text. This is some text. This is some text.
+
  Default</span><br />
    This is some text. This is some text. This is some text.
+
  <span style="cursor:pointer">
    This is some text. This is some text. This is some text.
+
  Pointer</span><br />
    This is some text. This is some text. This is some text.
+
  <span style="cursor:move">
    This is some text. This is some text. This is some text.
+
  Move</span><br />
    This is some text. This is some text. This is some text.
+
  <span style="cursor:e-resize">
    This is some text. This is some text. This is some text.
+
  e-resize</span><br />
    This is some text. This is some text. This is some text.
+
  <span style="cursor:ne-resize">
   </p>
+
  ne-resize</span><br />
</nowiki>
+
  <span style="cursor:nw-resize">
</body>
+
  nw-resize</span><br />
 +
  <span style="cursor:n-resize">
 +
  n-resize</span><br />
 +
  <span style="cursor:se-resize">
 +
  se-resize</span><br /> 
 +
  <span style="cursor:sw-resize">
 +
  sw-resize</span><br />
 +
  <span style="cursor:s-resize">
 +
  s-resize</span><br />
 +
  <span style="cursor:w-resize">
 +
  w-resize</span><br />
 +
  <span style="cursor:text">
 +
  text</span><br />
 +
  <span style="cursor:wait">
 +
   wait</span><br />
 +
  <span style="cursor:help">
 +
  help</span>
 +
  </body>
 
  </html>
 
  </html>
  

Revision as of 18:38, 4 December 2006

This document is a work in progress and is subject to change.

Summary

Cursor CSS property specifies the type of mouse cursor displayed over an element.

Syntax

cursor: [crosshair]

Legal Values

Value Description
url url of custom cursor. Always followed by pointer if previous cursors can't be found
default Default cursor
auto Browser sets a cursor
crosshair Cross cursor
pointer Hand cursor
move Move cursor cross
e-resize East resize cursor
ne-resize North East resize cursor
nw-resize North west resize cursor
n-resize North resize cursor
se-resize South east resize cursor
sw-resize Sourth west resize cursor
s-resize South resize cursor
w-resize West resize cursor
text Text cursor
wait Hourglass cursor
help Question mark cursor

Mozilla Recommended Values

Usage Examples

<html>
 <body>
 
 Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help </body> </html>

Notes

Specification Conformance

Browser Compatibility

Firefox,Netscape,Opera,IE

See Also