Firefly 魔改：自定义鼠标指针样式

AI 迁移提示

本文由 AI 协助从旧站迁移，尚未完成逐篇人工审校；内容如有疏漏，将在复核后修订。

> 本文部分内容由 AI 辅助整理，已结合实际操作进行校验，请根据自身环境谨慎使用。

一个小小的视觉彩蛋——把千篇一律的默认鼠标指针换成定制的 .cur 样式，让博客的每个细节都打上自己的印记。

一、设计思路

使用 .cur（静态光标）文件，兼容性最好
区分两种状态：默认光标和指针光标
纯 CSS 实现，零 JavaScript 开销

二、实现细节

CSS 变量

css

:root {
  --cursor-default: url('/mouse/default.cur'), default;
  --cursor-pointer: url('/mouse/pointer.cur'), pointer;
}

html, body {
  cursor: var(--cursor-default);
}

a, button, input[type="button"], input[type="submit"], input[type="reset"],
[type="button"], [type="submit"], [type="reset"],
button, select, label,
[role="button"], [role="link"],
.cursor-pointer {
  cursor: var(--cursor-pointer);
}

input, textarea, [contenteditable="true"] {
  cursor: text;
}

可点击元素的指针非可点击元素的指针

鼠标文件

两个 .cur 文件放在 public/mouse/：

default.cur — 默认箭头样式
pointer.cur — 手型指针样式

用工具（如 RealWorld Cursor Editor）制作自己的 .cur 文件替换即可。

全局导入

在 src/layouts/Layout.astro 的 frontmatter 区域与其他全局样式一起引入：

astro

import "@/styles/main.css";
import "@/styles/variables.styl";
import "@/styles/markdown-extend.styl";
import "@/styles/mouse.css";
import "@rehype-callouts-theme";