11.18　修改鼠标指针

一般情况下，浏览器负责控制鼠标指针的形状。大多数时候使用箭头形状，指向链接时使用手指形状（参见图11.18.1），等等。使用CSS可以修改指针的形状（如图11.18.2和图11.18.3所示）。

11.18　修改鼠标指针 - 图1

图11.18.1　指向Home链接时，指针变成手指形状，同时链接高亮显示。对于其他链接也是这样

  1. a.current {
  2.      color: #1d3d76;
  3. }
  4.  
  5. a:hover.current {
  6.      background: white;
  7.      cursor: default;
  8. }

图11.18.2　当访问者位于主页时，我为home链接添加了class="current"。这样就修改了home链接的鼠标停留状态的颜色、指针和背景颜色，让它看起来不像是链接（另外，在这个例子中，也可以在导航中去掉home链接周围的a元素）

11.18　修改鼠标指针 - 图2

图11.18.3　尽管它仍然是真正的链接，但它看起来已不像是链接。访问者正位于这个链接指向的页面，因此这样做是有意义的

修改指针形状的步骤

  • 输入cursor:。

  • 输入pointer表示停留在链接上时通常显示的指针形状（11.18　修改鼠标指针 - 图3）或default表示箭头（11.18　修改鼠标指针 - 图4），或者输入crosshair（11.18　修改鼠标指针 - 图5）、move（11.18　修改鼠标指针 - 图6）、wait（11.18　修改鼠标指针 - 图7）、help（11.18　修改鼠标指针 - 图8）、text（11.18　修改鼠标指针 - 图9）或progress（11.18　修改鼠标指针 - 图10）；

或者输入auto显示特定情形下通常使用的指针形状；

或者输入x-resize显示双向箭头，这里的x是其中一个箭头需要指向的方向，可以是n（北）、nw（西北）、e（东），等等。例如，e-resize指针显示成11.18　修改鼠标指针 - 图11。

提示　不同浏览器、不同系统的指针形状可能有细微的差异。