cursor - HTML CSS CSS Property

HTML CSS examples for CSS Property:cursor

Description

The cursor CSS property sets the cursor type.

The following table summarizes the cursor Property.

Item Value
Default value: auto
Applies to:All elements
Inherited: Yes
Animatable: No.

Syntax

The syntax of the property is as follows:


cursor:[url(address of cursor file),] | 
          auto | 
          default | 
          none | 
          context-menu | 
          help | 
          pointer | 
          progress | 
          wait | 
          cell | 
          crosshair | 
          text | 
          vertical-text | 
          alias | 
          copy | 
          move | 
          no-drop | 
          not-allowed | 
          grab | 
          grabbing | 
          e-resize | 
          n-resize | 
          ne-resize | 
          nw-resize | 
          s-resize | 
          se-resize | 
          sw-resize | 
          w-resize | 
          ew-resize | 
          ns-resize | 
          nesw-resize | 
          nwse-resize | 
          col-resize | 
          row-resize | 
          all-scroll | 
          zoom-in | 
          zoom-out | 
          initial | 
          inherit

For the comma-separated list of user-defined cursors, if the first cursor can't be found, the next cursor in the comma-separated list will be used.

The example below shows the cursor property.

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS cursor property</title>
  <style type="text/css">
    a {<!-- w w  w .ja  va2s  . com-->
        cursor: url("https://www.java2s.com/style/demo/Opera.png"), url("https://www.java2s.com/style/demo/Firefox.png"), default;
    }
    .cursor-demo span{
        min-width: 100px;
        padding: 5px 10px;
        margin-bottom: 5px;
        display: inline-block;
        border: 1px solid grey;
        border-radius: 3px;
    }
</style>
 </head>
 <body>
  <h1>Custom Cursor</h1>
  <p>Place your mouse pointer <a href="#">over me</a> to reveal the custom cursor.</p>
  <hr>
  <h2>More Cursors</h2>
  <p>Place your mouse pointer over the box to see the cursor.</p>
  <div class="cursor-demo">
   <span style="cursor: auto;">auto</span>
   <span style="cursor: default;">default</span>
   <span style="cursor: none;">none</span>
   <span style="cursor: context-menu;">context-menu</span>
   <span style="cursor: help;">help</span>
   <span style="cursor: pointer;">pointer</span>
   <span style="cursor: progress;">progress</span>
   <span style="cursor: wait;">wait</span>
   <span style="cursor: cell;">cell</span>
   <span style="cursor: crosshair;">crosshair</span>
   <span style="cursor: text;">text</span>
   <span style="cursor: vertical-text;">vertical-text</span>
   <span style="cursor: alias;">alias</span>
   <span style="cursor: copy;">copy</span>
   <span style="cursor: move;">move</span>
   <span style="cursor: no-drop;">no-drop</span>
   <span style="cursor: not-allowed;">not-allowed</span>
   <span style="cursor: grab;">grab</span>
   <span style="cursor: grabbing;">grabbing</span>
   <span style="cursor:e-resize">e-resize</span>
   <span style="cursor: n-resize;">n-resize</span>
   <span style="cursor: ne-resize;">ne-resize</span>
   <span style="cursor: nw-resize;">nw-resize</span>
   <span style="cursor: s-resize;">s-resize</span>
   <span style="cursor: se-resize;">se-resize</span>
   <span style="cursor: sw-resize;">sw-resize</span>
   <span style="cursor: w-resize;">w-resize</span>
   <span style="cursor: ew-resize;">ew-resize</span>
   <span style="cursor: ns-resize;">ns-resize</span>
   <span style="cursor: nesw-resize;">nesw-resize</span>
   <span style="cursor: nwse-resize;">nwse-resize</span>
   <span style="cursor: col-resize;">col-resize</span>
   <span style="cursor: row-resize;">row-resize</span>
   <span style="cursor: all-scroll;">all-scroll</span>
   <span style="cursor: zoom-in;">zoom-in</span>
   <span style="cursor: zoom-out;">zoom-out</span>
  </div>
 </body>
</html>

Related Tutorials