笙亿网络策划

CSS cursor 怎么用？鼠标指针样式设置详解？

约 16 分钟读完 37 阅
文章导读
上一个 测验 下一个 CSS cursor 属性决定了鼠标悬停在应用了此属性的元素上时鼠标光标的显示外观。其主要目的是通过视觉表示某些功能来提升可用性。
📋 目录
  1. 一 语法
  2. 二 属性值
  3. 三 CSS Cursor 属性的示例
  4. 四 所有 cursor 的演示
  5. 五 将图像设置为光标
  6. 六 支持的浏览器
A A

CSS - cursor 属性

上一个
测验
下一个

CSS cursor 属性决定了鼠标悬停在应用了此属性的元素上时鼠标光标的显示外观。其主要目的是通过视觉表示某些功能来提升可用性。

语法

cursor: value;

属性值

值 描述
auto 显示的 cursor 由 user agent 根据当前上下文决定。这是浏览器用来定义 cursor 的默认属性。
alias 显示的 cursor 是 alias cursor，表示需要生成别名或快捷方式。
all-scroll 显示的 cursor 表示滚动已完成。
cell 显示的 cursor 是 cell cursor，表示可以选择表格单元格或一组单元格。
col-resize 显示的 cursor 是 column-resize cursor，表示元素或列可能进行水平调整大小，通常表示为左右指向的箭头，由垂直条分隔。
copy 显示的 cursor 是 copy cursor，表示需要创建某物的副本。
crosshair 显示的 cursor 是 Crosshair cursor，通常用于表示在位图中选择元素。
default 默认 cursor，根据平台不同而异，通常显示为箭头。
e-resize 显示的 cursor 是南方向 resize cursor，表示南侧可以移动或调整。
ew-size 显示的 cursor 是东西方向 resize cursor，表示双向调整大小的 cursor。
grab 显示的 cursor 是 grab cursor，表示可以抓住元素并拖动以重新定位。
grabbing 显示的 cursor 是 grabbing cursor，表示某物正在被抓住或拉动以便移动。
help 显示的 cursor 是 help cursor，表示可以访问帮助信息。
move 显示的 cursor 是 move cursor，表示某物可以被重新定位。
n-resize 显示的 cursor 是北方向 resize cursor，表示北侧可以移动或调整。
ne-resize 显示的 cursor 是东北方向 resize cursor，表示双向调整大小的 cursor。
nw-resize 显示的 cursor 是西北方向 resize cursor，表示双向调整大小的 cursor。
ns-resize 显示的 cursor 是南北方向 resize cursor，表示双向调整大小的 cursor。
nesw-resize 显示的 cursor 是东北西南方向 resize cursor，表示双向调整大小的 cursor。
nwse-resize 显示的 cursor 是西北东南方向 resize cursor，表示双向调整大小的 cursor。
no-drop 显示的 cursor 是 no-drop cursor，表示可能无法将项目放置在当前位置。
not-allowed 显示的 cursor 是 not-allowed cursor，表示请求的操作不会被执行。
pointer 显示的 cursor 是 pointer cursor，表示 cursor 用作指向超链接的指示器。
progress 显示的 cursor 是 progress cursor，表示程序正在执行后台任务，允许用户继续与界面交互，而无需等待其完成。
row-resize 显示的 cursor 是 row-resize cursor，表示元素或行可能进行垂直调整大小，通常表示为上下指向的箭头，由水平条分隔。
s-resize 显示的 cursor 是南方向 resize cursor，表示南侧可以移动或调整。
se-resize 显示的 cursor 是东南方向 resize cursor，表示双向调整大小的 cursor。
sw-resize 显示的 cursor 是西南方向 resize cursor，表示双向调整大小的 cursor。
text 显示的 cursor 是 text cursor，表示可以选择文本，通常由 I 形 cursor 表示。
URL 显示的 cursor 是由逗号分隔的 urls 指定的图像，必须在 urls 末尾提供一个通用 cursor，以防图像无法使用。
wait 显示的 cursor 是 wait cursor，程序当前正忙，用户无法与界面交互，此状态有时由沙漏或手表图像表示。
w-resize 显示的 cursor 是西方向 resize cursor，表示西侧可以移动或调整。
zoom-in 显示的 cursor 是 zoom-in，表示可以通过缩放放大对象。
zoom-out 显示的 cursor 是 zoom-out，表示可以通过缩放缩小对象。

CSS Cursor 属性的示例

以下示例演示了cursor属性使用不同值的效果。

所有 cursor 的演示

以下示例展示了多种提到的 cursor，将鼠标悬停在每个块上以观察效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .demo-cursor {
         text-align: center;
         display: inline-block;
         width: 100px;
         height: 100px;
         margin: 10px;
         border: 3px solid #ccc;
         cursor: pointer;
      }

      .demo-cursor:hover {
         background-color: lightgrey;
      }

      .default:hover {
         cursor: default;
      }

      .auto {
         cursor: auto;
      }

      .crosshair {
         cursor: crosshair;
      }

      .pointer {
         cursor: pointer;
      }

      .move {
         cursor: move;
      }

      .text {
         cursor: text;
      }

      .wait {
         cursor: wait;
      }

      .help {
         cursor: help;
      }

      .not-allowed {
         cursor: not-allowed;
      }

      .progress {
         cursor: progress;
      }

      .alias {
         cursor: alias;
      }

      .copy {
         cursor: copy;
      }

      .no-drop {
         cursor: no-drop;
      }

      .e-resize {
         cursor: e-resize;
      }

      .n-resize {
         cursor: n-resize;
      }

      .ne-resize {
         cursor: ne-resize;
      }

      .nw-resize {
         cursor: nw-resize;
      }

      .s-resize {
         cursor: s-resize;
      }

      .se-resize {
         cursor: se-resize;
      }

      .sw-resize {
         cursor: sw-resize;
      }

      .w-resize {
         cursor: w-resize;
      }

      .ew-resize {
         cursor: ew-resize;
      }

      .ns-resize {
         cursor: ns-resize;
      }

      .nesw-resize {
         cursor: nesw-resize;
      }

      .nwse-resize {
         cursor: nwse-resize;
      }

      .col-resize {
         cursor: col-resize;
      }

      .row-resize {
         cursor: row-resize;
      }

      .zoom-in {
         cursor: zoom-in;
      }

      .zoom-out {
         cursor: zoom-out;
      }

      .grab {
         cursor: grab;
      }

      .cell {
         cursor: cell;
      }

      .grabbing {
         cursor: grabbing;
      }

      .all-scroll {
         cursor: all-scroll;
      }
    </style>
</head>

<body>
   <h2>
      CSS cursor 属性
   </h2>
   <h3>
      所有 CSS cursor，将鼠标悬停在块上。
   </h3>
   <div class="demo-cursor auto">
      <h3>
         Auto
      </h3>
   </div>
   <div class="demo-cursor alias">
      <h3>
         Alias
      </h3>
   </div>
   <div class="demo-cursor all-scroll">
      <h3>
         All-scroll
      </h3>
   </div>
   <div class="demo-cursor cell">
      <h3>
         cell
      </h3>
   </div>
   <div class="demo-cursor col-resize">
      <h3>
         col-resize
      </h3>
   </div>
   <div class="demo-cursor copy">
      <h3>
         Copy
      </h3>
   </div>
   <div class="demo-cursor crosshair">
      <h3>
         Crosshair
      </h3>
   </div>
   <div class="demo-cursor default">
      <h3>
         Default
      </h3>
   </div>
   <div class="demo-cursor e-resize">
      <h3>
         e-resize
      </h3>
   </div>
   <div class="demo-cursor ew-resize">
      <h3>
         ew-resize
      </h3>
   </div>
   <div class="demo-cursor grab">
      <h3>
         Grab
      </h3>
   </div>
   <div class="demo-cursor grabbing">
      <h3>
         Grabbing
      </h3>
   </div>
   <div class="demo-cursor help">
      <h3>
         Help
      </h3>
   </div>
   <div class="demo-cursor move">
      <h3>
         Move
      </h3>
   </div>
   <div class="demo-cursor n-resize">
      <h3>
         n-resize
      </h3>
   </div>
   <div class="demo-cursor ne-resize">
      <h3>
         ne-resize
      </h3>
   </div>
   <div class="demo-cursor nw-resize">
      <h3>
         nw-resize
      </h3>
   </div>
   <div class="demo-cursor ns-resize">
      <h3>
         ns-resize
      </h3>
   </div>
   <div class="demo-cursor nesw-resize">
      <h3>
         nesw-resize
      </h3>
   </div>
   <div class="demo-cursor nwse-resize">
      <h3>
         nwse-resize
      </h3>
   </div>
   <div class="demo-cursor no-drop">
      <h3>
         No-drop
      </h3>
   </div>
   <div class="demo-cursor not-allowed">
      <h3>
         Not-allowed
      </h3>
   </div>
   <div class="demo-cursor pointer">
      <h3>
         Pointer
      </h3>
   </div>
   <div class="demo-cursor progress">
      <h3>
         Progress
      </h3>
   </div>
   <div class="demo-cursor row-resize">
      <h3>
         row-resize
      </h3>
   </div>
   <div class="demo-cursor s-resize">
      <h3>
         s-resize
      </h3>
   </div>
   <div class="demo-cursor se-resize">
      <h3>
         se-resize
      </h3>
   </div>
   <div class="demo-cursor sw-resize">
      <h3>
         sw-resize
      </h3>
   </div>
   <div class="demo-cursor text">
      <h3>
         Text
      </h3>
   </div>
   <div class="demo-cursor wait">
      <h3>
         Wait
      </h3>
   </div>
   <div class="demo-cursor w-resize">
      <h3>
         w-resize
      </h3>
   </div>
   <div class="demo-cursor zoom-in">
      <h3>
         Zoom-in
      </h3>
   </div>
   <div class="demo-cursor zoom-out">
      <h3>
         Zoom-out
      </h3>
   </div>

</body>

</html>

将图像设置为光标

图像也可以用作光标，需要指定所需图像的 url。以下示例展示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .demo-cursor {
         text-align: center;
         display: inline-block;
         background-color: lightgrey;
         width: 100px;
         height: 100px;
         margin: 10px;
         border: 3px solid #ccc;
         cursor: url(/css/images/try-it.jpg), pointer;
      }
   </style>
</head>

<body>
   <h2>
      CSS cursor property
   </h2>
   <h3>
      Hover over the block
   </h3>
   <div class="demo-cursor">
      <h3>
         Image Cursor
      </h3>
   </div>
   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
cursor 5.0 5.5 4.0 5.0 9.6
css_reference.htm