cursor 是 CSS 中用于设置鼠标指针形状的属性。通过这个属性,你可以定义当用户将鼠标悬停在元素上时,鼠标指针的样式。

具体的使用方式如下:
/* 语法 */
cursor: value;

/* 示例 */
a:hover {
  cursor: pointer; /* 当鼠标悬停在链接上时,显示小手指形状的鼠标指针 */
}

.button:hover {
  cursor: grab; /* 当鼠标悬停在按钮上时,显示可拖动的鼠标指针 */
}

一些常见的 cursor 取值包括:

  •  auto: 浏览器自动决定合适的鼠标指针。

  •  pointer: 小手指,表示链接。

  •  default: 默认的鼠标指针,通常是一个箭头。

  •  text: 文本编辑指针,表示可以编辑文本。

  •  wait: 表示等待,通常是一个旋转的圆圈。

  •  move: 表示可移动,通常用于拖动操作。

  •  not-allowed: 表示不允许的操作,通常是一个禁止符号。


你还可以使用自定义的图片来作为鼠标指针,例如:
.custom-cursor {
  cursor: url('custom-cursor.png'), auto;
}

上述例子中,鼠标指针将会被设置为 custom-cursor.png 图片。请注意,这个功能不是所有浏览器都支持,而且可能会因为图片路径错误或不合适而导致无法显示自定义鼠标指针。


转载请注明出处:http://www.zyzy.cn/article/detail/6060/CSS