1. 首页
  2. CSS 菜鸟教程
  3. CSS - 光标（cursor）

CSS - 光标（cursor）

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

可能的值

cursor 属性可以具有以下值：

  • <url>：（可选）您可以灵活地使用一系列用逗号分隔的 url（） 值，每个 url（） 都指向一个图像文件。
  • <x> <y>：（可选）您可以选择指定 x 和 y 坐标来定义光标的热点，并指定光标指向的光标图像中的确切位置。
  • <keyword>：一个关键字值，该值指定要使用的游标类型，或者如果无法加载任何指定的符号，则指定要使用的备用游标。

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

类别 值 示例 描述
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

显示的光标是 coloumn-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

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

适用于

所有 HTML 元素。

DOM 语法

object.style.cursor = "cell";

需要注意的几点：

  • cursor 属性的特点是值的组合，其范围可以从零到多个 <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-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（以便找不到该图像），然后执行程序。我们看到了回退效应，即当找不到第一个图像时，源，控件回退到第二个图像上，该图像被用作光标。

<< CSS - Padding (填充)属性 CSS - 轮廓 >>