react如何改变鼠标样式

修改鼠标样式的通用方法

在React中修改鼠标样式可以通过CSS的cursor属性实现，直接在组件内联样式或外部CSS文件中定义。以下是几种常见方式：

内联样式写法

<div style={{ cursor: 'pointer' }}>点击区域</div>

CSS类名写法

.custom-cursor {
  cursor: grab;
}

<div className="custom-cursor">可拖动区域</div>

动态切换鼠标样式

通过状态管理实现交互式光标变化：

function InteractiveComponent() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      style={{ cursor: isHovered ? 'zoom-in' : 'default' }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      悬停放大
    </div>
  );
}

自定义光标图像

使用URL指定自定义光标图片（需注意浏览器兼容性）：

.custom-icon {
  cursor: url('path/to/cursor.png'), auto;
}

常用cursor属性值

• pointer：手型指针
• move：移动指示器
• text：文本输入I型
• wait：加载等待
• not-allowed：禁止操作
• grab：可抓取
• zoom-in/out：缩放控制

注意事项

1. 自定义图像光标建议同时提供备用值（如cursor: url('icon.png'), pointer;）
2. 移动端浏览器对某些光标类型支持有限
3. 复杂交互建议结合useEffect管理全局光标状态