CSS – Cursors
CSS – Cursors
The type of cursor when hovering over a link is displayed to the user that is determined by this property. In the case of using the Submit button, this property is not working as the Submit button has a visual clue to be clickable.
Syntax:
<div style= “cursor: [property]” >Link </div>
Various cursor properties are auto (hand or | sign), crosshair (+ sign), default (arrow sign), pointer (pointing hand), e-resize (moved right), ne-resize (moved up and right), nw-resize (moved up and left), n-resize (moved up), se-resize (moved down and right), sw-resize (moved down and left), s-resize (moved down), w-resize (moved left), text ( | bar symbol )wait (an hour glass symbol) and help ( ? or ballon sign).
Example:
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointing hand</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">moved right</div>
<div style = "cursor:ne-resize">moved up and right</div>
<div style = "cursor:nw-resize">moved up and left</div>
<div style = "cursor:n-resize">moved up</div>
<div style = "cursor:se-resize">moved down and right</div>
<div style = "cursor:sw-resize">moved down and left</div>
<div style = "cursor:s-resize">moved down</div>
<div style = "cursor:w-resize">moved left</div>
<div style = "cursor:text">| bar symbol </div>
<div style = "cursor:wait">waiting state</div>
<div style = "cursor:help">? symbol</div>
</body>
</html>
Output:
Quiz :
Quiz 1: How can you change various properties of cursor using CSS?
