如何将鼠标光标改为自定义图标？实现悬停元素切换血液图标

实现步骤： #

• 先将你准备的血液图标保存到项目本地目录，命名为blood-cursor.png（确保路径与HTML文件对应）。
• 通过CSS的cursor属性，给目标元素设置悬停状态下的自定义光标。

代码示例： #

HTML结构

给需要替换光标的元素添加统一类名，比如.blood-hover：

<div class="blood-hover">悬停我看光标变化</div>
<p class="blood-hover">我也是目标元素</p>

CSS样式

针对类名设置悬停样式：

.blood-hover:hover {
  /* 自定义光标，auto作为备用选项（图片加载失败时显示默认光标） */
  cursor: url('blood-cursor.png'), auto;
}

额外提示： #

• 光标图片建议控制在32x32px以内，避免显示异常。
• 如果需要调整光标点击的精准热点（默认是图片左上角），可以在路径后添加坐标参数，比如cursor: url('blood-cursor.png') 10 10, auto;，其中10 10是热点相对于图片左上角的位置。

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