css鼠标指针光标样式_指针姐妹：使用CSS更改浏览器的光标

css鼠标指针光标样式

While the browser will automatically change the appearance of the cursor in the context of many UI elements - switching it to a pointing hand when over links, for example - there are occasions when you’ll want to change it manually for particular operations: a compass cursor to indicate that an element may be moved, for example. This is commonly achieved through CSS; in particular, the cursor property for an element.

尽管浏览器会在许多UI元素的上下文中自动更改光标的外观-例如，通过链接时将其切换为指向手形-在某些情况下，您需要针对特定​​操作手动更改它：指南针例如，光标指示元素可以移动。 这通常是通过CSS实现的； 特别是元素的cursor属性。

小心指向的地方 (Be Careful Where You Point)

It’s very important to note that you should never change the cursor “just because”. The cursor is the primary method visitor’s use to interact with your site; altering it just because you can ruins user’s UI expectations, leading to frustration and abandonment. If you set the cursor property, it should always be appropriate to the task at hand, and within the user’s expectations.

非常重要的一点是，您切勿“仅因为”更改光标。 游标是访问者与您的网站进行交互的主要方法； 仅仅因为您可能破坏用户对UI的期望而对其进行更改，从而导致沮丧和放弃。 如果设置了cursor属性，则该属性应始终适合手头的任务，并且应在用户期望的范围内 。

It’s also important to note that changing the cursor in CSS does not change it’s function, in and of itself: that is, setting cursor: grab on an element does not automatically make it draggable. The operational side of things is handled with JavaScript; CSS only changes the presentation of the cursor.

同样重要的是要注意，在CSS中更改光标不会改变其功能 ，即本身不会改变它的功能 ：也就是说，设置cursor: grab元素不会自动使其可拖动。 事物的操作方面由JavaScript处理; CSS仅更改光标的表示形式 。

cursor is usually set on a particular element, often on :hover or similar state: for example, in one of my before-and-after image comparators:

cursor通常设置在特定元素上，通常设置在:hover或类似状态：例如，在我的前后图像比较器之一中 ：

div#inked-painted:hover {
	cursor: col-resize;
}

There are a wide range of cursors available in browsers. Cursors will appear different between different operating systems; the only way to make them completely consistent is to make and use your own cursor image (for that, see the guide at the end of this article).

浏览器中有多种游标可用。 在不同的操作系统之间，游标会有所不同。 使它们完全一致的唯一方法是制作并使用您自己的光标图像(为此，请参阅本文结尾处的指南)。

In the table below, cursors are shown by hovering over its name, to the left.

在下表中，将光标悬停在名称上方(左侧)显示。

Value	Meaning
default	The default cursor; usually a pointer
auto	The cursor will as whatever is appropriate in the current browser context. Note that appearance will not always be exactly what you want, or what you think is appropriate.
none	No cursor is rendered. Be particularly careful with this one, as it can really confuse users if not handled very carefully.
context-menu	A contextual menu is available.
help	Help is available with this option
pointer	Associated with hovering over a link; typically appears as a pointing hand
progress	The web application or site is busy in the background, but can still be interacted with. Don’t confuse this with the <progress> element. Often the same display as wait (see below).
wait	The application is busy (typically shown as a spinning ball or a working watch).
cell	Indicates that table cells can be selected.
crosshair	Cross cursor, often used to indicate selection on a bitmap.
text	Horizontal text can be selected.
vertical-text	Vertical text is available for selection.
alias	An alias, shortcut, or symlink is to be created.
copy	Some content can be copied.
move	The element may be moved.
no-drop	An element may not be dropped in this location. (Often the same appearance as not-allowed - see below).
not-allowed	Something cannot be done at this location.
all-scroll	The element can be scrolled or panned in any direction.
col-resize	The element or column can be resized horizontally.
row-resize	The element or row can be resized vertically.
n-resize	The element can be resized, but only upwards.
e-resize	The element can be resized, but only to the right.
w-resize	The element can only be expanded to the left.
s-resize	The element can only be expanded downwards.
ne-resize	The upper right corner of an element can be dragged outwards.
nw-resize	The upper left corner of an element can be dragged outwards.
se-resize	The lower right corner of an element can be dragged outwards.
sw-resize	The lower left corner of an element can be dragged outwards.
ew-resize	The element may be resized horizontally.
ns-resize	The element may be resized vertically.
nesw-resize	The element may be resized diagonally, in the directions indicated.
nwse-resize	The element may be resized diagonally, in the directions indicated.
zoom-in	Indicates that something may be zoomed or magnified. No support in IE.
zoom-out	Indicates that something may be zoomed out. No support in IE.
grab	An element can be grabbed. No support in IE; other browsers require vendor prefixes before the value(cursor: -webkit-grab, etc).
grabbing	The element is currently grabbed. No support in IE; as with the previous example, requires vendor prefixes.

值	含义
默认	默认光标； 通常是一个指针
汽车	光标将在当前浏览器上下文中适当显示。 请注意，外观并不一定总是您想要的或您认为合适的。
没有	没有呈现光标。 请特别小心，因为如果处理不当，它确实会使用户感到困惑。
上下文菜单	可以使用上下文菜单。
救命	此选项可提供帮助
指针	与悬停在链接上相关联； 通常显示为指示手
进展	该Web应用程序或网站在后台处于繁忙状态，但仍可以与之交互。 不要将此与<progress>元素混淆。 通常与wait显示相同(请参阅下文)。
等待	应用程序忙(通常显示为旋转的球或工作中的手表)。
细胞	表示可以选择表格单元格。
十字准线	十字光标，通常用于指示在位图上的选择。
文本	可以选择水平文本。
垂直文本	垂直文本可供选择。
别名	将创建别名，快捷方式或符号链接。
复制	某些内容可以复制。
移动	元素可以移动。
没有下降	不得在此位置放置元素。 (通常与not-allowed外观相同-见下文)。
不允许	无法在此位置进行任何操作。
全卷	元素可以在任何方向上滚动或平移。
调整大小	元素或列可以水平调整大小。
行调整大小	元素或行可以垂直调整大小。
调整大小	元素可以调整大小，但只能向上调整。
电子调整	元素可以调整大小，但只能在右侧。
调整大小	该元素只能向左扩展。
调整大小	该元素只能向下扩展。
调整大小	元素的右上角可以向外拖动。
调整大小	元素的左上角可以向外拖动。
调整大小	元素的右下角可以向外拖动。
调整大小	元素的左下角可以向外拖动。
调整大小	元素可以水平调整。
ns-调整大小	元素可以垂直调整大小。
调整大小	可以在指示的方向上对角线调整大小。
nwse-resize	可以在指示的方向上对角线调整大小。
放大	表示某些东西可能被放大或放大了。 IE中不支持。
缩小	表示某些内容可能会缩小。 IE中不支持。
抓	可以抓取元素。 IE中不支持； 其他浏览器在值( cursor: -webkit-grab等)之前需要供应商前缀 。
抢	该元素当前已被抓取。 IE中不支持； 与前面的示例一样，需要供应商前缀。

Again, a cursor value by itself does not prevent other actions: a nesw-resize can still select text by default, for example.

同样，游标值本身不会阻止其他操作：例如，默认情况下， nesw-resize仍可以选择文本。

自定义光标 (Custom cursors)

It’s also possible to set the cursor to a defined image, much as background images are set. There are a few problems with this:

与设置背景图像一样，也可以将光标设置为已定义的图像。 这有一些问题：

• Internet Explorer only supports the .cur and .ani files for the cursor; all other browsers support PNG, which (due to its support for alpha transparency) is recommended.

  Internet Explorer仅支持游标的.cur和.ani文件。 所有其他浏览器都支持PNG，(建议使用PNG(由于其对alpha透明性的支持)。

• All browsers support setting the “hotpoint” of the cursor - the active or “pointing” part of the cursor, except for IE. These x and y coordinates are ignored in IE.

  除 IE 之外 ，所有浏览器均支持设置光标的“热点”-光标的活动或“指向”部分。 这些x和y坐标在IE中被忽略。

Custom cursors need to be designed as carefully as favicons; since they will be seen against both dark and light backgrounds, they must be drawn to work on both, such as the following:

自定义光标需要像favicon一样精心设计； 由于可以在黑暗和明亮的背景下看到它们，因此必须将它们绘制为可同时在两者上工作，例如：

Custom cusrsor design: note the use of black and white pixels to provide contrast against dark and light backgrounds

定制的光标设计：请注意使用黑白像素在黑暗和明亮的背景下提供对比度

To use a custom cursor, a default and fallback must be provided for browsers such as IE:

要使用自定义光标， 必须为IE之类的浏览器提供默认值和后备广告：

canvas {
    cursor:  crosshair;
    cursor: url(circular-cursor.png) 53 53, crosshair;
}

In this case, the 53 53 represents the pointer of the cursor - it’s center, in this case - used in my “Scratch” Reveal with HTML5 canvas: 53 pixels from the left and top of the PNG file.

在这种情况下，53 53表示光标的指针-在这种情况下为中心，在我的HTML5 canvas的“ Scratch” Reveal中使用 ：距PNG文件左侧和顶部53像素。

翻译自: https://thenewcode.com/1119/Pointer-Sisters-Changing-The-Browsers-Cursor-with-CSS

css鼠标指针光标样式