Css 简明教程

CSS - cursor Property

CSS cursor 属性决定当鼠标悬停在应用此属性的元素上时，鼠标光标的外观。此属性仅适用于具有鼠标和光标功能的环境。它的主要目的是通过可视化某些功能来改善可用性。

Possible Values

cursor 属性可以具有以下值：

  1. <url> ：（可选）你可以灵活地使用一系列 url() 值以逗号分隔，其中每个 url() 指向一个图像文件。

  2. <x> <y> ：（可选）你可以选择指定 x 和 y 坐标，这些坐标定义了光标热点，并指定光标指向的光标图像中的确切位置。

  3. <keyword> :必须指定一个关键字值来指定要使用的光标类型，或者在无法加载指定符号之一时要使用的备用光标。

下表列出了可用的关键字。

Category

Value

Example

Description

General

auto

显示的光标是由用户代理根据当前上下文确定的。这是浏览器用于定义光标的默认属性。

default

默认光标（因平台而异）通常显示为箭头。

none

没有显示的光标。

Links and Status

context-menu

显示光标是内容菜单光标，表示可以访问上下文菜单。

help

显示光标是帮助光标，显示有关帮助的信息可以访问。

pointer

显示光标是指针光标，表示光标用作指示指向超链接的指示器。

progress

显示光标是进度光标，表示程序正在执行后台任务，允许用户与界面进行交互，而无需等待其完成。

wait

显示光标是光标，程序当前处于占用状态，用户无法与界面进行交互，此状态有时由沙漏或手表图像表示。

Drag and Drop

alias

显示光标是别名光标，表示需要生成别名或快捷方式。

copy

显示光标是复制光标，表示需要创建副本。

move

显示光标是移动光标，表示可以重新放置。

no-drop

显示光标是不允许放下光标，表示可能无法将项放置在其当前位置。

not-allowed

显示光标是不允许的光标，表示不会执行所请求的操作。

grab

显示光标是抓取光标，表示可以抓住元素并将其拖动以重新定位。

grabbing

显示光标是抓取光标，表示正在握住或拉动某些内容以促进其移动。

Selection

cell

显示光标是单元格光标，显示了选择表格单元格或一组单元格的选项。

crosshair

显示光标是十字光标，通常用于指示位图中的元素选择。

text

显示光标是文本光标，表示可以使用 I 形光标指示的文本进行选择。

vertical-text

显示光标是垂直文本光标，表示可以使用侧对齐 I 栏指示的垂直文本进行选择。

Zooming

zoom-in

显示光标是放大，表示可以通过缩放来放大对象。

zoom-out

显示光标是缩小，表示可以通过缩放来缩小对象。

Resizing and Scrolling

all-scroll

显示光标是全部滚动光标，可以向任何方向滚动，也称为平移。

col-resize

显示光标为列大小调整光标，表示元素或列可能进行水平大小调整，通常表示为箭头指向左右，由垂直线分隔。

row-resize

显示光标为行大小调整光标，表示元素或行可能进行垂直大小调整，通常表示为箭头指向上下，由水平线分隔。

n-resize

显示光标为北向大小调整光标，表示北侧可以移动或移位。

e-resize

显示光标为东向大小调整光标，表示东侧可以移动或移位。

s-resize

显示光标为南向大小调整光标，表示南侧可以移动或移位。

w-resize

显示光标为西向大小调整光标，表示西侧可以移动或移位。

ne-resize

显示光标为东北向大小调整光标，表示可进行双向大小调整的光标。

nw-resize

显示光标为西北向大小调整光标，表示可进行双向大小调整的光标。

se-resize

显示光标为东南向大小调整光标，表示可进行双向大小调整的光标。

sw-resize

显示光标为西南向大小调整光标，表示可进行双向大小调整的光标。

ew-size

显示光标为东西向大小调整光标，表示可进行双向大小调整的光标。

ns-resize

显示光标为南北向大小调整光标，表示可进行双向大小调整的光标。

nesw-resize

显示光标为东北向西南向大小调整光标，表示可进行双向大小调整的光标。

nwse-resize

Applies to

所有 HTML 元素。

DOM Syntax

   object.style.cursor = "cell";

一些需要说明的点：

  1. cursor 属性以值的组合为特征，从零到多个<url>，用逗号分隔，然后是强制关键字（所有关键字在下一部分的表格中列出）值。

  2. 每个<url>都应该指向一个图像文件。

  3. 浏览器将尝试加载指定的第一个图像，如果加载不了则加载下一个，如果无法加载任何图像（或没有指定图像），则加载关键字值。

CSS Cursor - Keyword Value

以下示例展示了 CSS 中不同类型的鼠标光标 -

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: pointer;
   }
   .default { 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; }
   .grabbing { cursor: grabbing; }
</style>
</head>
<body>
<h1>All CSS Cursors, hover the mouse on the blocks.</h1>
   <div class="demo-cursor auto"><h3 style="text-align:center;">Auto</h3></div>
   <div class="demo-cursor default"><h3 style="text-align:center;">Default</h3></div>
   <div class="demo-cursor crosshair"><h3 style="text-align:center;">Crosshair</h3></div>
   <div class="demo-cursor pointer"><h3 style="text-align:center;">Pointer</h3></div>
   <div class="demo-cursor move"><h3 style="text-align:center;">Move</h3></div>
   <div class="demo-cursor text"><h3 style="text-align:center;">Text</h3></div>
   <div class="demo-cursor wait"><h3 style="text-align:center;">Wait</h3></div>
   <div class="demo-cursor help"><h3 style="text-align:center;">Help</h3></div>
   <div class="demo-cursor not-allowed"><h3 style="text-align:center;">Not-allowed</h3></div>
   <div class="demo-cursor progress"><h3 style="text-align:center;">Progress</h3></div>
   <div class="demo-cursor alias"><h3 style="text-align:center;">Alias</h3></div>
   <div class="demo-cursor copy"><h3 style="text-align:center;">Copy</h3></div>
   <div class="demo-cursor no-drop"><h3 style="text-align:center;">No-drop</h3></div>
   <div class="demo-cursor e-resize"><h3 style="text-align:center;">e-resize</h3></div>
   <div class="demo-cursor n-resize"><h3 style="text-align:center;">n-resize</h3></div>
   <div class="demo-cursor ne-resize"><h3 style="text-align:center;">ne-resize</h3></div>
   <div class="demo-cursor nw-resize"><h3 style="text-align:center;">nw-resize</h3></div>
   <div class="demo-cursor s-resize"><h3 style="text-align:center;">s-resize</h3></div>
   <div class="demo-cursor se-resize"><h3 style="text-align:center;">se-resize</h3></div>
   <div class="demo-cursor sw-resize"><h3 style="text-align:center;">sw-resize</h3></div>
   <div class="demo-cursor w-resize"><h3 style="text-align:center;">w-resize</h3></div>
   <div class="demo-cursor ew-resize"><h3 style="text-align:center;">ew-resize</h3></div>
   <div class="demo-cursor ns-resize"><h3 style="text-align:center;">ns-resize</h3></div>
   <div class="demo-cursor nesw-resize"><h3 style="text-align:center;">nesw-resize</h3></div>
   <div class="demo-cursor nwse-resize"><h3 style="text-align:center;">nwse-resize</h3></div>
   <div class="demo-cursor col-resize"><h3 style="text-align:center;">col-resize</h3></div>
   <div class="demo-cursor row-resize"><h3 style="text-align:center;">row-resize</h3></div>
   <div class="demo-cursor zoom-in"><h3 style="text-align:center;">Zoom-in</h3></div>
   <div class="demo-cursor zoom-out"><h3 style="text-align:center;">Zoom-out</h3></div>
   <div class="demo-cursor grab"><h3 style="text-align:center;">Grab</h3></div>
   <div class="demo-cursor grabbing"><h3 style="text-align:center;">Grabbing</h3></div>
</body>
</html>

CSS Cursor - <url> Value

以下示例展示了使用图像作为鼠标光标值 -

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: url(images/try-it.jpg), pointer;
   }
</style>
</head>
<body>
<h1>Image CSS Cursors, hover the mouse on the block.</h1>
   <div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
  </div>
</body>
</html>

CSS Cursor - <url> Multiple Values

下面举例说明如何使用多张图像（用逗号分隔）作为光标值：

<html>
<head>
<title>All CSS Cursors</title>
<style>
   .demo-cursor {
      display: inline-block;
      background-color: LightYellow;
      width: 100px;
      height: 100px;
      margin: 10px;
      border: 3px solid #ccc;
      cursor: url(images/try-it.jpg),url(images/cursor-text1.png),  crosshair;
   }
</style>
</head>
<body>
<h1>Image CSS Cursors, hover the mouse on the block.</h1>
   <div class="demo-cursor"><h3 style="text-align:center;">Image Cursor</h3></div>
  </div>
</body>
</html>

尝试将第一个图像文件名重命名为 try-it-1.jpg（以便找不到图像），然后执行程序，我们将看到备用效果，即当找不到第一个图像时，源会降级为第二个图像，并将其用作光标。