How to add css cursor property
The cursor property specifies the mouse cursor on the hover element to visible pointing. Cursor property allows you to specify the type of cursor example pointer, alias,all-scroll, etc. A cursor hovers over a link, the cursor changes the pointer to a hand.
Code :
<!DOCTYPE html>
<html>
<head>
<title>How to add css cursor property</title>
<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>
<center><h1>How to add css cursor property</h1>
<br>
<span class="alias">alias</span>
<span class="all-scroll">all-scroll</span>
<span class="auto">auto</span>
<span class="cell">cell</span>
<span class="context-menu">context-menu</span>
<span class="col-resize">col-resize</span><br><br>
<span class="copy">copy</span>
<span class="crosshair">crosshair</span>
<span class="default">default</span>
<span class="e-resize">e-resize</span>
<span class="ew-resize">ew-resize</span>
<span class="grab">grab</span><br><br>
<span class="grabbing">grabbing</span>
<span class="help">help</span>
<span class="move">move</span>
<span class="n-resize">n-resize</span>
<span class="ne-resize">ne-resize</span>
<span class="nesw-resize">nesw-resize</span><br><br>
<span class="ns-resize">ns-resize</span>
<span class="nw-resize">nw-resize</span>
<span class="nwse-resize">nwse-resize</span>
<span class="no-drop">no-drop</span>
<span class="none">none</span>
<span class="not-allowed">not-allowed</span><br><br>
<span class="pointer">pointer</span>
<span class="progress">progress</span>
<span class="row-resize">row-resize</span>
<span class="s-resize">s-resize</span>
<span class="se-resize">se-resize</span>
<span class="sw-resize">sw-resize</span><br><br>
<span class="text">text</span>
<span class="url">url</span>
<span class="w-resize">w-resize</span>
<span class="wait">wait</span>
<span class="zoom-in">zoom-in</span>
<span class="zoom-out">zoom-out</span>
</center>
</body>
</html>
Output :
How to add css cursor property
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