CSS HTML Style Cursor Pointer

一、指针变化

在网页开发过程中，指针的变化很常见，如当鼠标悬停在图片上时，鼠标指针会变为手型，或者当鼠标悬停在链接上时，鼠标指针会变为小手形状。

CSS提供了一种简便的方法来实现指针变化，即使用cursor属性。cursor属性可用于定义在鼠标移到某元素之上时所显示的光标形状。cursor属性可使用如下值：

  cursor:auto; /* 默认光标 */
  cursor:default; /* 默认光标 */
  cursor:none; /* 隐藏光标 */
  cursor:context-menu; /* 上下文菜单（通常是小箭头） */
  cursor:help; /* 帮助光标（通常是问号加小箭头） */
  cursor:pointer; /* 小手光标 */
  cursor:progress; /* 进度条（通常是小手加等待图标） */
  cursor:text; /* 文本光标（通常是一根竖线） */
  cursor:wait; /* 等待光标（通常是转圈的小圆点） */

以下是一个例子：

  <style>
    .myButton { 
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer; /* 小手光标 */
    }
  </style>
  <button class="myButton">点击我</button>

二、自定义光标

除了使用已有的光标形状外，CSS还可以允许我们自定义光标，只需指定自己定义的图片即可。例如：

  <style>
    .myCursor {
      cursor: url('myCursor.png'), auto;
    }
  </style>
  <p class="myCursor">这是一段鼠标指针为自定义图片的文本</p>

三、小结

通过cursor属性，我们可以很方便地实现指针变化，并且可以自定义光标形状，可以为网页增加更丰富的视觉效果。