CSS Properties: How to display different type of cursor?
Solution:
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:
- This HTML document demonstrates various cursor styles that can be applied using the cursor CSS property.
- Each <span> element contains text representing a different cursor style, and its style attribute is used to set the cursor style.
- Comments are provided to explain each cursor style applied to the <span> elements.
- The paragraph at the end provides instructions for the user to mouse over the words to see the cursor change effect.
Live Demo:
See the Pen cursor-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
 |
 |
 |
 |
 |
| Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.