←CSS3 属性
CSS 伪类 :default→

语法

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

游标属性示例：

<!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 属性示例</h2>
    <div class="cursor">
      <div class="auto">auto</div>
      <div class="help">help</div>
    </div>
  </body>
</html>

这是一个包含游标属性所有值的示例。
为“放大”、“缩小”、“抓取”和“抓取”值添加了 -webkitextention。

具有“zoom-in”、“zoom-out”、“grab”和“grabbing”值的游标属性示例：

<!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 属性示例</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>

带有“url”值的游标属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .cursor {
        display: inline-block;
        width: 30px;
        height: 30px;
        cursor: url("/img.png"), auto;
      }
    </style>
  </head>
  <body>
    <h2>Cursor 属性示例</h2>
    <p> 将鼠标游标悬停在元素上以查看更改</p>
    <i class="cursor">Icon</i>
  </body>
</html>

CSS cursor 属性值说明

值描述
auto这意味着浏览器将设置一个游标。这是此属性的默认值。
default它是默认的游标。
none这意味着元素呈现的游标。
context-menu游标表示上下文菜单可用。
help游标表示可用的帮助。
pointer游标表示作为指针的链接。
progress游标表示程序繁忙或者正在进行中。
wait游标表示程序忙。
cell这意味着游标将指示可以选择细胞或者一组小区。
crosshair游标将作为十字准线。
text游标表示可以选择的文本。
URL将逗号分隔为自定义游标的URL列表。
vertical-text游标表示可以选择的垂直文本。
alias这意味着游标将表示要创建某些东西的别名。
copy游标表示可以复制的东西。
move游标表示可以移动某些东西。
no-drop游标表示拖动的项目（item）（item）无法在此丢弃。
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游标表示可以抓住的东西。
initial它使属性使用其默认值。
inherit它从其父母元素继承了属性。
CSS 游标属性

cursor 属性定义了鼠标指针在元素上时鼠标游标的类型。

游标定义为零个或者多个逗号分隔的 <url> 值，后跟关键字值。
这些 <url> 中的每一个都必须指示一个图像文件。
如果浏览器无法加载第一个指定的图像，它将退回到下一个图像。
如果浏览器找不到任何图像，它将回退到关键字值。

添加了 -webkit- 属性扩展以显示 Safari、Google Chrome 和 Opera（较新版本）的一些值。

初始值auto
应用于所有元素。
继承可继承
可动画的无效
版本CSS2
DOM 语法object.Style.Cursor =“cell”;
日期：2020-06-02 22:14:27 来源：oir作者：oir
←CSS3 属性
CSS 伪类 :default→

目录

Copyright © 2017-2019 OnITRoad.com All rights reserved.  桂ICP备20001160号-1  关于 | 隐私和政策