cursor - HTML CSS CSS Property

HTML CSS examples for CSS Property:cursor

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. 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