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 17: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

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=CSS_GUIDE_CURSOR&oldid=7313"