如何为button按钮元素设置自定义悬停鼠标光标样式

完全可以通过CSS实现<button>元素的悬停自定义光标效果，不需要修改原有button的DOM结构，仅需配置对应样式即可：

实现步骤 #

• 准备自定义光标资源：优先选用.cur格式（兼容性最优），也可使用.png等常规图片格式，建议尺寸控制在32x32像素以内，避免适配问题。
• 为button的hover状态配置cursor属性：属性值首先填写自定义光标资源的路径，可追加两个数字参数设置光标热点的坐标偏移（即光标触发交互的基准点，默认是左上角），最后添加默认光标作为加载失败的降级方案。

代码示例 #

/* 基础自定义光标配置 */
button:hover {
  cursor: url('./my-custom-cursor.cur'), pointer;
}

/* 带热点偏移的配置示例，以下示例设置热点为图片的(2,2)像素位置 */
button:hover {
  cursor: url('./my-custom-cursor.png') 2 2, pointer;
}

注意事项 #

• 若需要兼容多端场景，可以同时指定多个光标资源，浏览器会按顺序尝试加载，直到找到可用的资源：

  button:hover {
    cursor: url('./custom.cur'), url('./custom.png'), pointer;
  }
  

• 热点坐标数值不能超过光标图片本身的宽高，否则配置会被浏览器自动忽略。

内容的提问来源于stack exchange，提问作者etayluz