w3resource

CSS Properties: How to display different type of cursor?

Go to Exercise page

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

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/html-css-exercise/css-properties/cursor-answer.php