HTML Code:
<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to display different type of cursor</title><!-- Sets the title of the HTML document -->
</head>
<body>
<span style="cursor:alias">alias</span><br><!-- Sets the cursor to an alias pointer -->
<span style="cursor:auto">auto</span><br><!-- Sets the cursor to the platform-dependent default cursor -->
<span style="cursor:crosshair">crosshair</span><br><!-- Sets the cursor to a crosshair -->
<span style="cursor:default">default</span><br><!-- Sets the cursor to the default arrow -->
<span style="cursor:e-resize">e-resize</span><br><!-- Sets the cursor to an east (horizontal) resize cursor -->
<span style="cursor:grab">grab</span><br><!-- Sets the cursor to an open hand, typically used to indicate that something can be dragged -->
<span style="cursor:help">help</span><br><!-- Sets the cursor to a help cursor, typically a question mark or a hand with a question mark -->
<span style="cursor:move">move</span><br><!-- Sets the cursor to a move cursor, typically used to indicate that something can be moved -->
<span style="cursor:n-resize">n-resize</span><br><!-- Sets the cursor to a north (vertical) resize cursor -->
<span style="cursor:ne-resize">ne-resize</span><br><!-- Sets the cursor to a north-east (diagonal) resize cursor -->
<span style="cursor:nw-resize">nw-resize</span><br><!-- Sets the cursor to a north-west (diagonal) resize cursor -->
<span style="cursor:pointer">pointer</span><br><!-- Sets the cursor to a pointing hand, typically used to indicate a hyperlink -->
<span style="cursor:progress">progress</span><br><!-- Sets the cursor to a progress spinner, typically used to indicate that a process is ongoing -->
<span style="cursor:s-resize">s-resize</span><br><!-- Sets the cursor to a south (vertical) resize cursor -->
<span style="cursor:se-resize">se-resize</span><br><!-- Sets the cursor to a south-east (diagonal) resize cursor -->
<span style="cursor:sw-resize">sw-resize</span><br><!-- Sets the cursor to a south-west (diagonal) resize cursor -->
<span style="cursor:text">text</span><br><!-- Sets the cursor to a text input cursor, typically an I-beam -->
<span style="cursor:w-resize">w-resize</span><br><!-- Sets the cursor to a west (horizontal) resize cursor -->
<span style="cursor:wait">wait</span><br><!-- Sets the cursor to a wait cursor, typically a spinning wheel or hourglass -->
<span style="cursor:not-allowed">not-allowed</span><br><!-- Sets the cursor to a circle with a line through it, typically used to indicate that an action is not allowed -->
<span style="cursor:no-drop">no-drop</span><br><!-- Sets the cursor to a circle with a diagonal line, typically used to indicate that an item cannot be dropped here -->
<span style="cursor:zoom-in">zoom-in</span><br><!-- Sets the cursor to a magnifying glass with a plus sign, typically used to indicate that something can be zoomed in -->
<p><strong>Mouse over the words to change the cursor.</strong></p><!-- Inserts a paragraph with a strong tag, providing instructions to mouse over the words to change the cursor -->
</body>
</html>
Explanation:
Live Demo:
See the Pen cursor-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4