CSS 如何设置指示任何方向滚动的光标样式

在进入这个话题之前，让我们先了解一下光标作为一个UI元素的重要性。我们知道，在一个网站中，用户与之互动的第一件事主要是光标，这就是为什么操作光标的样式和效果对设计来说是最重要的，因为它对整个用户体验有很大的贡献。

光标属性是用来设置鼠标光标的，当我们把鼠标指向一个元素时，光标就会出现。它适用于所有的元素，并且是可继承的，这意味着子元素也会有与其父元素一样的光标。

计算值可以是绝对的，也可以是指定的，这取决于我们是否在属性值中使用urls。它有一个离散的动画风格。
这是通过为光标图像提供一个或多个逗号分隔的urls来指定的，但必须要有一个回退的关键字值。
在设计样式时，浏览器会尝试加载由urls指定的图片，如果在加载图片时出现错误，游标会回退并使用关键字值。

我们还可以选择在urls后面提供两个用空格隔开的数字，定义光标热点的x和y坐标，与图像的左上角有关。

现在让我们简单地了解一下这些值的每一个。

url(s) – 这是一个可选的值，包含了我们希望作为光标的图像文件的源位置。我们也可以通过指定一个逗号分隔的url列表来提供一个以上的图片作为光标，以备我们有一个以上的光标用于后退。
X和Y– 这些也是可选的数值，指向光标中被指向的确切位置；光标热点。这些数字实际上指的是像素大小，它们被夹在光标图像的范围内，并且是相对于图像的左上角而言的，对应于 “0 0″。
关键字值– 这是一个必须要有的属性值，它指定了我们要使用的游标类型，或者在图像加载失败的情况下我们要使用的游标。有许多关键词值可供我们使用，例如，自动、默认、无、帮助、等待、十字线，以及更多。

使用所有滚动的属性

在这一点上，我们知道了光标属性和它可能的值。那么，出现的问题是，什么关键字值会将光标设置为任何方向的滚动。这个问题的答案是，”all-scroll”。all-scroll属性值用于我们希望向任何方向滚动的元素。

例子

下面给出了一个使用 all-scroll 关键字值来设置光标样式为任何方向滚动的例子。

<!DOCTYPE html>
<html>
<head>
   <style>
      #all-scrollValue {
         color: brown;
         cursor: all-scroll;
      }
   </style>
</head>
<body>
   <h1>Using all scroll property to change cursor</h1>
   <h2 id="all-scrollValue">
      Hover over this text to see the cursor change to any-direction scroll.
   </h2>
</body>
</html>

使用移动属性值

根据275174号错误，所有光标属性值的作用与Windows中的移动属性值相同。所以Windows用户也可以使用移动属性值来设置任意方向的滚动。

例子

下面是使用移动属性值设置任意方向滚动光标的例子。

<!DOCTYPE html>
<html>
<head>
   <style>
      #all-scrollValue {
         color: brown;
         cursor: all-scroll;
      }
      #movePropertyValue {
         color: crimson;
         cursor: move;
      }
   </style>
</head>
<body>
   <h1>Using all scroll property to change cursor</h1>
   <h2 id="all-scrollValue">
      Hover over this text to see the cursor change to any-direction scroll.
   </h2>
   <h2 id="movePropertyValue">
      Hover over to see the effect of move property value.
   </h2>
</body>
</html>