CSS秘密花园： 挑选合适的光标_html/css_WEB-ITnose

《 css secrets 》是 @lea verou 最新著作，这本书讲解了有关于css中一些小秘密。是一本csser值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在w3cplus发布一系列相关的读后感，与大家一起分享。

立即学习“前端免费学习笔记（深入）”；

鼠标指针的意义并不仅仅是为了显示目前屏幕上的光标在何处，还是为了告诉用户可以进行哪些交互动作。这是在桌面应用程序中很常见的用户体验，但是在Web App中则经常被遗忘。

作者并不是唯一一个抱怨此事的人。回到CSS2.1中，我们并没有真正接触到很多内置游标。我们主要是用指针的光标属性来表示哪些东西是可点击的，或通过帮助光标来提示使用工具。有些人还利用了等待和进度光标来代替（或同时表示）进度条。但也仅此而已。但是，尽管在 CSS User Interface Level 3 中，我们得到了很多新的可用的内置光标，很多作者还是保持着用老的光标习惯。像很多用户体验的改进，你可能没有真正意识到这是一个问题，直到你哪天真的碰到了这些问题。我们接着往下看！

立即学习“前端免费学习笔记（深入）”；

解决方案

你可以在下图中看到新的内置光标的完整列表

立即学习“前端免费学习笔记（深入）”；

可以去规范里了解它们的作用。但正如你所想，不是每一个都可以在Web APP中使用。例如，有一个 cell 光标，表示“一个或一组被选中的单元”。你可以想象，没有多少用例是超越电子表格和可编辑网格的。

本节内容的目标不是在于对所有这些新游标的潜在使用案例做一个详尽的介绍。但是，它们中的少数是脱颖而出的，因为它们可以瞬间提升很多Web APP的可用性，只需要一点点代码即可。

声明禁用状态

可以说，被应用得最广泛的是 not-allowed 光标。

立即学习“前端免费学习笔记（深入）”；

通过一定的控制来暗示因为某些原因，所以有一些交互是不可以进行的，这是非常有用的一点——通常是因为上述控制会被禁用。特别是现在，有很多非常程式化的表单，往往很难分辨表单控件是否可行，所以这是一个可喜的援助。你可以通过一个相当通用的方式来使用它，如下：

:disabled, [disabled], [aria-disabled="true"] {    cursor: not-allowed;}

隐藏光标

隐藏光标听起来就像可用性的噩梦，是不是？居然会有人想要这么做，而且Web标准居然还帮他们实现了？在你对这些人发疯前，确实有一些针对可用性还未解决的问题，记得你那些使用公共触摸屏的经历吗（如，那些用于消息展示和机上娱乐的东西），开发人员忘了隐藏鼠标光标，所以在屏幕上总是有一个挥之不去的怪异的地方。或者是当你观看视频时，把鼠标移动到屏幕右侧，希望它自动隐藏的时候，就是因为你的光标挡住视线了。

显然，隐藏光标提升可用性这方面还有很多使用示例。这就是为什么新光标的关键字中有一个是 none 。CSS 2.1中是可以隐藏光标的，但是它是使用一个透明的 1x1 的GIF图，如下：

video {    cursor: url(transparent.gif);}

如果你在观看视频时隐藏光标，确保你没有不小心把它控制视频播放的功能也给隐藏了，否则你做得也就弊大于利了。

现在，我们不需要这么麻烦了，因为我们直接使用 cursor: none 就可以了。但是，你可能还希望它能提供降级，针对那些还不兼容CSS3光标的浏览器。我们可以通过级联来完成：

cursor: url('transparent.gif');cursor: none;