CSS - 光标

CSS光标属性决定鼠标光标悬停在应用该属性的元素上时的外观。此属性仅适用于具有鼠标和光标功能的环境。其主要目的是通过直观地表示某些功能来提高可用性。

可能的光标值

光标属性可以具有以下值：

  • <url>：（可选）您可以灵活地使用一系列以逗号分隔的url()值，每个url()都指向一个图像文件。

  • <x> <y>：（可选）您可以选择指定定义光标热点的x和y坐标，并指定光标在光标图像中指向的确切位置。

  • <keyword>：需要一个关键字值来指定要使用的游标类型或在无法加载任何指定符号时要使用的备用游标。

基于关键字的游标值

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

关键词 例子 描述

汽车

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

默认

默认光标根据平台的不同而有所不同，通常显示为箭头。

没有任何

没有显示光标。

上下文菜单

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

帮助

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

指针

显示的光标为指针光标，表明该光标作为指向超链接的指示符。

进步

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

等待

显示的光标是光标，当前程序被占用，用户无法与界面交互，这种状态有时用沙漏或手表的图像来表示。

别名

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

复制

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

移动

显示的光标是移动光标，表示可以重新定位某些内容。

没有下降

显示的光标是不可放置光标，表明可能无法将项目放置在其当前位置。

不允许

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

抓住

显示的光标为抓取光标，表示可以抓取该元素，并且可以拖动来重新定位它。

抢夺

显示的光标为抓取光标，表示正在握住或拉动某物以方便其移动。

细胞

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

十字线

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

文本

显示的光标为文本光标，表明您可以选择通常由 I 形光标指示的文本。

垂直文本

显示的光标为竖排文本光标，表明您可以选择竖排文本，通常由侧对齐的 I 条表示。

放大

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

缩小

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

全滚动

显示的光标均为滚动光标，可以向任意方向滚动，也称为平移。

调整大小

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

行调整大小

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

n-调整大小

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

电子调整大小

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

s-调整大小

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

w-调整大小

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

重新调整大小

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

西北调整大小

显示的光标为西北调​​整大小光标，显示双向调整大小的光标。

调整大小

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

sw-调整大小

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

ew 尺寸

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

ns-调整大小

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

新调整大小

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

Nwse-调整大小

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

适用于

所有 HTML 元素。

DOM语法

object.style.cursor = "pointer";

需要注意的几点：

  • 光标属性的特征是值的组合，其范围可以从零到多个<url>，用逗号分隔，后跟强制关键字（下节表中列出的所有关键字）值。

  • 每个 <url> 应该指向一个图像文件。

  • 浏览器将尝试加载指定的第一个图像，如果不能加载，则回退到下一个图像；如果无法加载图像（或者未指定图像），则回退到关键字值。

CSS 光标 - 关键字值

下面的示例显示了 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 光标 - <url> 值

这是显示使用图像作为光标值的示例 -

<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 光标 - <url> 多个值

这是显示使用多个图像（逗号分隔）作为光标值的示例 -

<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-pointer.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（这样就找不到图像），然后执行程序。我们看到回退效果，即当第一个图像未找到源时，控件回退到第二个图像，并且该图像用作光标，即使未找到该光标，它也会回退到十字准线。