如何在TailwindCSS中设置自定义图片光标热点？

AI 小北

2026-8-12

如何用TailwindCSS动态设置自定义图片光标及中心热点

当然可行，不用修改Tailwind主题也能实现动态自定义光标及热点位置，以下是两种直接可用的方案：

方案1：直接使用内联style（最简便）

CSS原生的cursor属性支持在自定义图片后追加热点坐标，格式为url(图片路径) X Y, auto，其中X和Y就是热点相对于图片左上角的像素位置，设为中心的话直接取图片宽高的一半即可。

比如你的光标图片是32x32像素，热点设为中心就写：

<div style="cursor: url('/assets/custom-cursor.png') 16 16, auto;">
  鼠标悬停此区域查看效果
</div>

如果是动态场景（比如根据用户上传的图片调整），在前端框架里可以直接绑定变量计算：
以React为例：

import { useState } from 'react';

function App() {
  // 假设从用户输入获取光标地址和尺寸
  const [cursorSrc, setCursorSrc] = useState('/assets/default-cursor.png');
  const [cursorSize, setCursorSize] = useState({ w: 32, h: 32 });

  return (
    <div
      style={{
        cursor: `url(${cursorSrc}) ${cursorSize.w / 2} ${cursorSize.h / 2}, auto`
      }}
      className="w-full h-screen bg-gray-100"
    >
      动态光标演示区域
    </div>
  );
}

方案2：结合CSS变量与自定义类（更贴合Tailwind风格）

如果不想写大量内联style，可以先在全局CSS里定义一个通用类，用CSS变量来传递光标路径和热点坐标：

/* 全局样式文件（比如global.css） */
.custom-dynamic-cursor {
  cursor: var(--cursor-url) var(--cursor-hot-x) var(--cursor-hot-y), auto;
}

然后在HTML中通过style属性动态赋值变量：

<div 
  class="custom-dynamic-cursor w-full h-screen bg-gray-100"
  style="--cursor-url: url('/user-uploaded-cursor.png'); --cursor-hot-x: 32; --cursor-hot-y: 32;"
>
  自定义光标区域
</div>

这种方式既保留了Tailwind的类名写法，又能灵活根据用户输入调整光标参数。