css 游标_您需要了解的有关CSS游标规则的所有信息

css 游标

尽管触摸控制界面在世界范围内越来越流行，但本文将重点介绍更传统的鼠标输入方法。 我将建议一种渐进增强的方法来处理交互设计。 更具体地说，是CSS cursor规则的概述。

---

移动设计策略每天都变得越来越重要。 随着用户交互和控件针对触摸输入的不断优化，社区对响应式Web设计的尝试正在塑造和定义用户交互和控件的设计。 但是，行之有效的，精确的鼠标输入方法不会很快消失。 这个事实与Web的普遍性相结合，支持在Web界面设计中应完全支持传统和触摸输入优化。

---

光标的目的：传达职能

从桌面应用程序到操作系统到简单的网站，大多数软件都使用各种有用的GUI指针。 这些指针通过向用户建议他们可以在应用程序屏幕上坐标的特定点处完成哪些任务来帮助UI交互。

要输入或操作文本吗？ 您知道看到“ i型”光标时就可以。 要调整窗口大小吗？ 当您看到调整大小的光标时，您知道可以（朝哪个方向）。 在上面的示例中，您可以看到调整大小光标如何直观地建议可以调整窗口大小的方向。

通过在界面控制功能的上下文中操纵光标图形，可以指导用户何时，何地以及如何操纵软件。

一个例子

在Adobe的Creative Suite中可以找到利用光标设计来传达功能的一个很好的例子。

Adobe套件中的工具图标以图形方式反映了它们的固有功能。 在许多情况下，选择特定工具后，光标会非常类似于或精确反映该工具的图标。 这种简单的UI范例在可视化地传达应用程序扩展工具集中每个工具的目的和功能方面非常强大。

---

网络游标

更加完善的输入法（例如鼠标，手写笔和键盘）提供了触摸设备无法使用的视觉反馈的另一种形式：悬停。 悬停交互允许用户通过关联的悬停UI元素浏览和了解应用程序。 这些元素有助于向用户传达哪些对象是交互式的以及如何进行操作。

网络的本质要求通用性和可访问性...这种包罗万象，与输入无关的方法提出了独特的设计挑战

但是，悬停交互（例如工具提示）旨在解决专门针对鼠标的UI问题。 当在触摸屏设备上实现时，它们将变得无法操作。 由于Web的性质要求通用性和可访问性，因此必须将Web应用程序设计为可同时用于触摸和非触摸设备。 这种无所不包，与输入无关的方法提出了独特的设计挑战。 用户界面必须考虑触摸和非触摸设备。

再来一句话：渐进增强

这种以网络为中心的设计挑战包括一系列输入法，因此需要一种逐步增强的方法（顺便提一下，这种方法已经被提倡了一段时间 ）。

即使Web流量越来越多地被移动设备（进而是触摸屏设备）接管，CSS cursor规则也不是过时的。 您可以使用与输入无关的方法来设计网站或应用程序UI，该方法可在各种设备上使用。 无论这些设备是由触摸屏还是鼠标控制，CSS光标规则都将在支持的设备的视觉反馈中作为UI的一项附加（尽管不是强制性）改进。

---

实施内置游标

如前所述，CSS游标可用于向用户提示鼠标可以执行的功能。 您可以从用户计算机的浏览器或操作系统中内置的多种游标类型中进行选择（您可以在quirksmode.org上看到它们的列表）。 内置游标很不错，但是您必须记住它们是用户浏览器/操作系统所独有的。 因此，控件可能从一台计算机或浏览器到另一台计算机或浏览器有所不同。 这是一个如何更改光标的示例：

.elementClass {
	cursor: move;
}

---

实施自定义游标

如果您需要默认不包含或所有浏览器都不支持的光标，则可以选择包含自定义光标图像。 可以与font-family规则类似地进行定义，在该规则中，您可以提供后备，以防自定义光标未加载。

.elementClass {
	cursor: url('path/to/cursor.png'), move;
}

您甚至可以定义光标的位置（单击记录的位置）。 这些是相对于默认点'0，0'的X和Y值； 自定义光标图像的左上角。 在下面的示例中，我们将光标从左侧移动10个像素，从顶部移动5个像素。

.elementClass {
	cursor: url('path/to/cursor.png') 10 5, move;
}

---

跨浏览器游标规则

不幸的是，跨浏览器对自定义游标的支持并不像上面定义的规则那么容易。 有一些使光标在浏览器中正常运行的挂断。

IE仅支持.CUR文件

Internet Explorer 7和8仅支持.CUR文件 。 CUR文件类似于ICO文件，但是您可以从文件本身定义光标的“热点”。 如果您计划支持IE 7和8，则必须提供.CUR文件。

创建自己的.CUR文件超出了本文的范围。 但是，您可以尝试看看此Photoshop插件作为一个好的开始。

IE解释相对于文档的光标路径

所有浏览器都会将自定义光标的URL解释为相对于样式表的位置（根据W3C的建议）。 但是，Internet Explorer（7-9）将解释相对于HTML根目录的URL。

因此，假设我开始一个新项目。 它的根目录中有“ index.html”，以及图像，样式表和所有自定义光标的文件夹。 它看起来像这样：

如您所见，我的样式表和自定义光标是完全分开的。

在这种情况下，我将不得不编写具有后备功能的游标规则，以支持具有.PNG游标的现代浏览器以及具有.CUR文件的IE：

.elementClass {
	cursor: 	url(../cursors/cursor.png), /* Modern - relative to the document */ 
  			url(cursors/cursor.cur), /* IE - relative to the root */
  			default; /* Built-in fallback */
}

另外，您仍然可以在CSS中使用绝对路径，尽管您仍然必须为任何.CUR文件提供后备：

.elementClass {
	cursor:		url(/cursors/cursor.png), /* Modern */ 
  			url(/cursors/cursor.cur), /* IE  */
  			default; /* Built-in fallback */
}

要了解有关实现跨浏览器CSS游标的深入细节和麻烦的更多信息， 请访问useragentman.com 。 请记住，如果您支持触摸设备，则CSS光标可以是渐进增强功能。 这意味着它不一定需要对IE的支持（因为触摸屏上的用户也不会看到自定义光标）。

---

跨浏览器和平台的游标示例

如果您将CSS游标实现为逐步增强的一个方面，那么准确查看每个内置游标在浏览器和平台上的显示方式可能会很有用。 这将使您能够就如何设计界面做出明智的决定。 在这里，您将找到一个很好的参考，以了解游标在各个操作系统中的外观：

Windows 7的

浏览器测试

• IE9
• IE8
• Chrome
• Safari 5.1.7
• 火狐浏览器
• 歌剧

Windows XP

浏览器测试

• IE8
• IE7
• Chrome
• Safari 5.1.7
• 火狐浏览器
• 歌剧

OSX 10.8

浏览器测试

• Chrome22.0
• Safari 6.0
• Firefox 15.0
• 歌剧12.02

如您所见，存在各种细微的差异，这些差异可能会或可能不会影响界面的设计。 查看完整的图表 ，比较浏览器和平台上的游标。

---

结论

如您所见，CSS中的游标规则是您可以用来辅助用户与您的网站或应用程序交互的其他工具。 但是，您可能已经注意到，取决于用户的浏览器和操作系统，每个游标可以有多么不同和变化。

除了越来越多地使用触摸屏设备外，游标中的这些显着差异还使cursor规则在辅助UI交互中扮演了补充角色，但这并没有使它过时。 谨慎地使用光标作为渐进增强的功能要好于完全忽略它。 现在您知道如何使用它，去创建一些很棒的东西！

翻译自: https://webdesign.tutsplus.com/articles/everything-you-need-to-know-about-the-css-cursor-rule--webdesign-9441

css 游标