cursor

CSS cursor Property

The cursor property defines the type of mouse cursor when the mouse pointer is over the element.

The cursor is defined as zero or more comma-separated <url> values, followed by a keyword value. Each of these <url>s must indicate an image file. The browser will fall back to the next image if it can’t load up the first specified image. If the browser can’t find any image, it will fall back to the keyword value.

The -webkit- property extension is added to show some values for Safari, Google Chrome, and Opera (newer versions).

类目类目
Initial Valueauto
Applies toAll elements.
InheritedYes.
AnimatableNo.
VersionCSS2
DOM Syntaxobject.style.cursor = “cell”;

Syntax

Syntax

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | URL | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing

Example of the cursor property: 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .auto {
        cursor: auto;
      }
      .help {
        cursor: help;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

Here is an example with all the values of cursor property. The -webkit- extention is added for “zoom-in”, “zoom-out”, “grab” and “grabbing” values.

Example of the cursor property property with the “zoom-in”, “zoom-out”, “grab” and “grabbing” values: 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
        font-family: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        display: flex;
        flex-wrap: wrap;
      }
      .cursor > div {
        flex: 120px;
        padding: 10px 2px;
        white-space: nowrap;
        border: 2px solid #666;
        border-radius: 20px;
        margin: 0 5px 5px 0;
      }
      .cursor > div:hover {
        background: #eee;
      }
      .auto {
        cursor: auto;
      }
      .default {
        cursor: default;
      }
      .none {
        cursor: none;
      }
      .context-menu {
        cursor: context-menu;
      }
      .help {
        cursor: help;
      }
      .pointer {
        cursor: pointer;
      }
      .progress {
        cursor: progress;
      }
      .wait {
        cursor: wait;
      }
      .cell {
        cursor: cell;
      }
      .crosshair {
        cursor: crosshair;
      }
      .text {
        cursor: text;
      }
      .vertical-text {
        cursor: vertical-text;
      }
      .alias {
        cursor: alias;
      }
      .copy {
        cursor: copy;
      }
      .move {
        cursor: move;
      }
      .no-drop {
        cursor: no-drop;
      }
      .not-allowed {
        cursor: not-allowed;
      }
      .all-scroll {
        cursor: all-scroll;
      }
      .col-resize {
        cursor: col-resize;
      }
      .row-resize {
        cursor: row-resize;
      }
      .n-resize {
        cursor: n-resize;
      }
      .e-resize {
        cursor: e-resize;
      }
      .s-resize {
        cursor: s-resize;
      }
      .w-resize {
        cursor: w-resize;
      }
      .ns-resize {
        cursor: ns-resize;
      }
      .ew-resize {
        cursor: ew-resize;
      }
      .ne-resize {
        cursor: ne-resize;
      }
      .nw-resize {
        cursor: nw-resize;
      }
      .se-resize {
        cursor: se-resize;
      }
      .sw-resize {
        cursor: sw-resize;
      }
      .nesw-resize {
        cursor: nesw-resize;
      }
      .nwse-resize {
        cursor: nwse-resize;
      }
      .grab {
        cursor: -webkit-grab;
        cursor: grab;
      }
      .grabbing {
        cursor: -webkit-grabbing;
        cursor: grabbing;
      }
      .zoom-in {
        cursor: -webkit-zoom-in;
        cursor: zoom-in;
      }
      .zoom-out {
        cursor: -webkit-zoom-out;
        cursor: zoom-out;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="default">default</div>
      <div class="none">none</div>
      <div class="context-menu">context-menu</div>
      <div class="help">help</div>
      <div class="pointer">pointer</div>
      <div class="progress">progress</div>
      <div class="wait">wait</div>
      <div class="cell">cell</div>
      <div class="crosshair">crosshair</div>
      <div class="text">text</div>
      <div class="vertical-text">vertical-text</div>
      <div class="alias">alias</div>
      <div class="copy">copy</div>
      <div class="move">move</div>
      <div class="no-drop">no-drop</div>
      <div class="not-allowed">not-allowed</div>
      <div class="all-scroll">all-scroll</div>
      <div class="col-resize">col-resize</div>
      <div class="row-resize">row-resize</div>
      <div class="n-resize">n-resize</div>
      <div class="s-resize">s-resize</div>
      <div class="e-resize">e-resize</div>
      <div class="w-resize">w-resize</div>
      <div class="ns-resize">ns-resize</div>
      <div class="ew-resize">ew-resize</div>
      <div class="ne-resize">ne-resize</div>
      <div class="nw-resize">nw-resize</div>
      <div class="se-resize">se-resize</div>
      <div class="sw-resize">sw-resize</div>
      <div class="nesw-resize">nesw-resize</div>
      <div class="nwse-resize">nwse-resize</div>
      <div class="grab">grab</div>
      <div class="grabbing">grabbing</div>
      <div class="zoom-in">zoom-in</div>
      <div class="zoom-out">zoom-out</div>
    </div>
  </body>
</html>

Example of the cursor property with the “url” value: 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("/uploads/media/default/0001/04/6388ec92938ec31c9f019a249174f683118b55d6.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor property example</h2>
    <p> Hover the mouse cursor over the element to see the changes</p>
    <i class="cursor">Icon</i>
  </body>
</html>

Values

Values

ValueDescriptionPlay it
autoIt means that the browser will set a cursor. It is the default value of this property.Play it »
defaultIt is the default cursor.Play it »
noneIt means that there is no cursor rendered for the element.Play it »
context-menuThe cursor indicates that a context-menu is available.Play it »
helpThe cursor indicates that help is available.Play it »
pointerThe cursor indicates a link as a pointer.Play it »
progressThe cursor indicates that program is busy or in progress.Play it »
waitThe cursor indicates that the program is busy.Play it »
cellIt means that the cursor will indicate that a cell or set of cells may be selected.Play it »
crosshairThe cursor will be rendered as a crosshair.Play it »
textThe cursor indicates text which may be selected.Play it »
URLA comma separated list of URLs to custom cursors.Play it »
vertical-textThe cursor indicates vertical text which can be selected.Play it »
aliasIt means that the cursor will indicate an alias of something is to be created.Play it »
copyThe cursor indicates something which can be copied.Play it »
moveThe cursor indicates that something can be moved.Play it »
no-dropThe cursor indicates that the dragged item cannot be dropped here.Play it »
not-allowedThe cursor indicates that the requested action will not be executed.Play it »
all-scrollIt means that the cursor will indicate something can be scrolled in any direction.Play it »
col-resizeThe cursor indicates that the column can be resized horizontally.Play it »
row-resizeThe cursor indicates that the row can be resized vertically.Play it »
n-resizeThe cursor indicates that an edge of a box is to be moved up.Play it »
s-resizeThe cursor indicates that an edge of a box is to be moved down.Play it »
e-resizeThe cursor indicates that an edge of a box is to be moved right.Play it »
w-resizeThe cursor indicates that an edge of a box is to be moved left.Play it »
ns-resizeThe cursor indicates a bidirectional resize cursor.Play it »
ew-resizeThe cursor indicates bidirectional resize cursor.Play it »
ne-resizeThe cursor indicates that an edge of a box is to be moved up and right.Play it »
nw-resizeThe cursor indicates that an edge of a box is to be moved up and left.Play it »
se-resizeThe cursor indicates that an edge of a box is to be moved down and right.Play it »
sw-resizeThe cursor indicates that an edge of a box is to be moved down and left.Play it »
nesw-resizeThe cursor indicates a bidirectional resize cursor.Play it »
nwse-resizeThe cursor indicates a bidirectional resize cursor.Play it »
zoom-inThe cursor indicates that something can be zoomed in.Play it »
zoom-outThe cursor indicates that something can be zoomed out.Play it »
grabThe cursor indicates that something can be grabbed.Play it »
grabbingThe cursor indicates that something can be grabbed.Play it »
initialIt makes the property use its default value.Play it »
inheritIt inherits the property from its parents element.
← counter-reset
direction →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部