Difference between revisions of "CSS GUIDE CURSOR"

From CDOT Wiki
Jump to: navigation, search
 
(→‎Usage Examples)
 
(2 intermediate revisions by the same user not shown)
Line 17: Line 17:
 
<tr>
 
<tr>
 
<td>url</td>
 
<td>url</td>
−
<td>The image or text moves to the left of the parent element</td>
+
<td>url of custom cursor. Always followed by pointer if previous cursors can't be found</td>
 
</tr>
 
</tr>
  
 
<tr>
 
<tr>
 
<td>default</td>
 
<td>default</td>
−
<td>The image or text moves to the right of the parent element</td>
+
<td>Default cursor</td>
 
</tr>
 
</tr>
  
 
<tr>
 
<tr>
 
<td>auto</td>
 
<td>auto</td>
−
<td>Image or text does not move and it appears at the same location</td>
+
<td>Browser sets a cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>crosshair</td>
 
<td>crosshair</td>
−
<td></td>
+
<td>Cross cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>pointer</td>
 
<td>pointer</td>
−
<td></td>
+
<td>Hand cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>move</td>
 
<td>move</td>
−
<td></td>
+
<td>Move cursor cross</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>e-resize</td>
 
<td>e-resize</td>
−
<td></td>
+
<td>East resize cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>ne-resize</td>
 
<td>ne-resize</td>
−
<td></td>
+
<td>North East resize cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>nw-resize</td>
 
<td>nw-resize</td>
−
<td></td>
+
<td>North west resize cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>n-resize</td>
 
<td>n-resize</td>
−
<td></td>
+
<td>North resize cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>se-resize</td>
 
<td>se-resize</td>
−
<td></td>
+
<td>South east resize cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>sw-resize</td>
 
<td>sw-resize</td>
−
<td></td>
+
<td>Sourth west resize cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>s-resize</td>
 
<td>s-resize</td>
−
<td></td>
+
<td>South resize cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>w-resize</td>
 
<td>w-resize</td>
−
<td></td>
+
<td>West resize cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>text</td>
 
<td>text</td>
−
<td></td>
+
<td>Text cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>wait</td>
 
<td>wait</td>
−
<td></td>
+
<td>Hourglass cursor</td>
 
</tr>
 
</tr>
 
<tr>
 
<tr>
 
<td>help</td>
 
<td>help</td>
−
<td></td>
+
<td>Question mark cursor</td>
 
</tr>
 
</tr>
  
Line 96: Line 96:
  
 
== Usage Examples ==
 
== Usage Examples ==
−
 
+
<nowiki>
 
  <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>
 +
</nowiki>
  
 
== Notes ==
 
== Notes ==

Latest 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>
  <span style="cursor:auto">
  Auto</span><br />
  <span style="cursor:crosshair">
  Crosshair</span><br />
  <span style="cursor:default">
  Default</span><br />
  <span style="cursor:pointer">
  Pointer</span><br />
  <span style="cursor:move">
  Move</span><br />
  <span style="cursor:e-resize">
  e-resize</span><br />
  <span style="cursor:ne-resize">
  ne-resize</span><br />
  <span style="cursor:nw-resize">
  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>

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=7314"