Cursors
Various types of cursors can be displayed to the user using the CSS cursor property. This property is supported on most browsers. It displayed when pointing over the elements. There are various properties of the cursor. In this article, we try to define some essential properties of the cursor.
Default value: Auto
Inherited: Yes
Applies to: all elements
Computed value: URL->absolute else specified.
E.g., [ [ < url > [ < x > < y > ]?, ] * [ auto | default | none| context-menu |.....] ]
Animation type: discrete
We do not have any size limitation for the cursor.
These cursors can be grouped into the following types:
- General Cursors
- auto: cursor setup by the browser.
- default: A default cursor.
- none: no cursor is rendered.
- Links and Status Cursors
- context-menu: context menu is available at the cursor point.
- help: help is available.
- pointer: link is available.
- progress: the program is busy in progress.
- wait: program is busy.
- Selection Cursors
- cell: cell selection is indicated by the cursor.
- crosshair: cursor changes to crosshair.
- text: text may be selected.
- vertical-text: vertical text can select.
- Drag and drop Cursors
- alias: something is to be created.
- copy: copying with the cursor.
- move: something is moved.
- no-drop: can not drop the dragged item.
- not-allowed: restricted action.
- grab: can grab something (open palm).
- grabbing: can grab something (closed palm).
- Resizing and scrolling Cursors
- all-scroll: scroll in any direction.
- col-resize: column can be resized.
- row-resize: row can be resized.
- n-resize: edge of the box can move up.
- e-resize: edge of the box can move right.
- s-resize: edge of the box can move down.
- w-resize: edge of the box can move left.
- ne-resize: edge of the box can move up and right.
- nw-resize: edge of the box can move up and left.
- se-resize: edge of the box can move down and right.
- sw-resize: edge of the box can move down and left.
- ew-resize: bi-directional resize (left or right).
- ns-resize: bi-directional resize (up and down).
- nesw-resize: bi-directional resize (45 degrees tilted towards the right).
- nwse-resize: bi-direction resize. (45degrees tilted towards the left).
- Zoom and Grab Cursors
- zoom-in: you can zoom in.
- zoom-out: you can zoon-out.
Example:
<![CDATA[
<html>
<html lang="en-US">
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>
<h1>Knowledge2life</h1>
<p class="alias">alias</p>
<p class="all-scroll">all-scroll</p>
<p class="auto">auto</p>
<p class="cell">cell</p>
<p class="context-menu">context-menu</p>
<p class="col-resize">col-resize</p>
<p class="copy">copy</p>
<p class="crosshair">crosshair</p>
<p class="default">default</p>
<p class="e-resize">e-resize</p>
<p class="ew-resize">ew-resize</p>
<p class="grab">grab</p>
<p class="grabbing">grabbing</p>
<p class="help">help</p>
<p class="move">move</p>
<p class="n-resize">n-resize</p>
<p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p>
<p class="none">none</p>
<p class="not-allowed">not-allowed</p>
<p class="pointer">pointer</p>
<p class="progress">progress</p>
<p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p>
<p class="se-resize">se-resize</p>
<p class="sw-resize">sw-resize</p>
<p class="text">text</p>
<p class="url">url</p>
<p class="w-resize">w-resize</p>
<p class="wait">wait</p>
<p class="zoom-in">zoom-in</p>
<p class="zoom-out">zoom-out</p>
</body>
</html>]]>
OUTPUT:
Knowledge2life
alias
all-scroll
auto
cell
col-resize
copy
crosshair
default
e-resize
ew-resize
grab
grabbing
help
move
n-resize
ne-resize
nesw-resize
ns-resize
nw-resize
nwse-resize
no-drop
none
not-allowed
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
url
w-resize
wait
zoom-in
zoom-out
