[{"data":1,"prerenderedAt":273},["ShallowReactive",2],{"content:\u002Fposts\u002Fcustom-cursor":3,"surround:\u002Fposts\u002Fcustom-cursor":264},{"id":4,"title":5,"body":6,"categories":237,"date":239,"description":240,"draft":241,"extension":242,"image":243,"meta":244,"navigation":246,"path":247,"permalink":248,"pinned":241,"published":248,"readingTime":249,"recommend":248,"references":248,"seo":254,"sitemap":255,"stem":256,"tags":257,"type":261,"updated":262,"__hash__":263},"content\u002Fposts\u002Fposts\u002Fcustom-cursor.md","Firefly 魔改：自定义鼠标指针样式",{"type":7,"value":8,"toc":224},"minimark",[9,19,22,30,35,51,55,60,71,82,85,95,109,123,126,133,144,148,151,169],[10,11,15],"alert",{"title":12,"type":13,"icon":14},"AI 迁移提示","info","tabler:robot",[16,17,18],"p",{},"本文由 AI 协助从旧站迁移，尚未完成逐篇人工审校；内容如有疏漏，将在复核后修订。",[10,20],{"title":21,"type":13},"> 本文部分内容由 AI 辅助整理，已结合实际操作进行校验，请根据自身环境谨慎使用。",[16,23,24,25,29],{},"一个小小的视觉彩蛋——把千篇一律的默认鼠标指针换成定制的 ",[26,27,28],"code",{"code":28},".cur"," 样式，让博客的每个细节都打上自己的印记。",[31,32,34],"h2",{"id":33},"一设计思路","一、设计思路",[36,37,38,45,48],"ul",{},[39,40,41,42,44],"li",{},"使用 ",[26,43,28],{"code":28},"（静态光标）文件，兼容性最好",[39,46,47],{},"区分两种状态：默认光标和指针光标",[39,49,50],{},"纯 CSS 实现，零 JavaScript 开销",[31,52,54],{"id":53},"二实现细节","二、实现细节",[56,57,59],"h3",{"id":58},"css-变量","CSS 变量",[61,62,68],"pre",{"className":63,"code":65,"language":66,"meta":67},[64],"language-css",":root {\n  --cursor-default: url('\u002Fmouse\u002Fdefault.cur'), default;\n  --cursor-pointer: url('\u002Fmouse\u002Fpointer.cur'), pointer;\n}\n\nhtml, body {\n  cursor: var(--cursor-default);\n}\n\na, button, input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"],\n[type=\"button\"], [type=\"submit\"], [type=\"reset\"],\nbutton, select, label,\n[role=\"button\"], [role=\"link\"],\n.cursor-pointer {\n  cursor: var(--cursor-pointer);\n}\n\ninput, textarea, [contenteditable=\"true\"] {\n  cursor: text;\n}\n","css","title=\"src\u002Fstyles\u002Fmouse.css\"",[26,69,65],{"__ignoreMap":70},"",[16,72,73,78],{},[74,75],"img",{"alt":76,"src":77},"可点击元素的指针","https:\u002F\u002Fimg.olinl.com\u002Ffile\u002Fpost-img\u002Fcustom-cursor\u002F0001.webp",[74,79],{"alt":80,"src":81},"非可点击元素的指针","https:\u002F\u002Fimg.olinl.com\u002Ffile\u002Fpost-img\u002Fcustom-cursor\u002F0002.webp",[56,83,84],{"id":84},"鼠标文件",[16,86,87,88,90,91,94],{},"两个 ",[26,89,28],{"code":28}," 文件放在 ",[26,92,93],{"code":93},"public\u002Fmouse\u002F","：",[36,96,97,103],{},[39,98,99,102],{},[26,100,101],{"code":101},"default.cur"," — 默认箭头样式",[39,104,105,108],{},[26,106,107],{"code":107},"pointer.cur"," — 手型指针样式",[16,110,111,112,119,120,122],{},"用工具（如 ",[113,114,118],"a",{"href":115,"rel":116},"https:\u002F\u002Fwww.rw-designer.com\u002Fcursor-maker",[117],"nofollow","RealWorld Cursor Editor","）制作自己的 ",[26,121,28],{"code":28}," 文件替换即可。",[56,124,125],{"id":125},"全局导入",[16,127,128,129,132],{},"在 ",[26,130,131],{"code":131},"src\u002Flayouts\u002FLayout.astro"," 的 frontmatter 区域与其他全局样式一起引入：",[61,134,142],{"className":135,"code":137,"highlights":138,"language":140,"meta":141},[136],"language-astro","import \"@\u002Fstyles\u002Fmain.css\";\nimport \"@\u002Fstyles\u002Fvariables.styl\";\nimport \"@\u002Fstyles\u002Fmarkdown-extend.styl\";\nimport \"@\u002Fstyles\u002Fmouse.css\";\nimport \"@rehype-callouts-theme\";\n",[139],4,"astro","title=\"src\u002Flayouts\u002FLayout.astro\" ins=",[26,143,137],{"__ignoreMap":70},[31,145,147],{"id":146},"三自定义方法","三、自定义方法",[16,149,150],{},"想换鼠标样式只要三步：",[152,153,154,160,166],"ol",{},[39,155,156,157,159],{},"准备 ",[26,158,28],{"code":28}," 文件",[39,161,162,163,165],{},"覆盖 ",[26,164,93],{"code":93}," 下的对应文件",[39,167,168],{},"或在 CSS 中修改路径指向新文件",[10,170,173,182,186,194,202,209,217,221],{"title":171,"type":172},"注意","error",[16,174,175,177,178,181],{},[26,176,28],{"code":28}," 是静态光标格式，不支持动画。若需要动态光标需用 ",[26,179,180],{"code":180},".ani"," 格式，但浏览器兼容性较差。",[31,183,185],{"id":184},"四相关文件","四、相关文件",[16,187,188,189],{},"CSS 样式：",[113,190,193],{"href":191,"rel":192},"https:\u002F\u002Fgithub.com\u002Folinll\u002Ffirefly-blog\u002Fblob\u002Fmaster\u002Fsrc\u002Fstyles\u002Fmouse.css",[117],"\u002Fsrc\u002Fstyles\u002Fmouse.css",[16,195,196,197],{},"鼠标文件：",[113,198,201],{"href":199,"rel":200},"https:\u002F\u002Fgithub.com\u002Folinll\u002Ffirefly-blog\u002Fblob\u002Fmaster\u002Fpublic\u002Fmouse\u002Fdefault.cur",[117],"\u002Fpublic\u002Fmouse\u002Fdefault.cur",[16,203,196,204],{},[113,205,208],{"href":206,"rel":207},"https:\u002F\u002Fgithub.com\u002Folinll\u002Ffirefly-blog\u002Fblob\u002Fmaster\u002Fpublic\u002Fmouse\u002Fpointer.cur",[117],"\u002Fpublic\u002Fmouse\u002Fpointer.cur",[16,210,211,212],{},"相关源码：",[113,213,216],{"href":214,"rel":215},"https:\u002F\u002Fgithub.com\u002Folinll\u002Ffirefly-blog",[117],"olinll\u002Ffirefly-blog",[31,218,220],{"id":219},"最后","🔗 最后",[16,222,223],{},"鼠标指针是最容易被忽略但也最频繁接触的交互元素，花几分钟定制一下，能给博客带来独特的个性。",{"title":70,"searchDepth":139,"depth":139,"links":225},[226,228,234,235,236],{"id":33,"depth":227,"text":34},2,{"id":53,"depth":227,"text":54,"children":229},[230,232,233],{"id":58,"depth":231,"text":59},3,{"id":84,"depth":231,"text":84},{"id":125,"depth":231,"text":125},{"id":146,"depth":227,"text":147},{"id":184,"depth":227,"text":185},{"id":219,"depth":227,"text":220},[238],"Firefly","2026-07-21 19:41:32","使用 .cur 文件替换默认鼠标样式，区分默认态和可点击元素。",false,"md","https:\u002F\u002Fimg.olinl.com\u002Ffile\u002Fpost-img\u002Fcustom-cursor\u002Fcover.webp",{"slots":245},{},true,"\u002Fposts\u002Fcustom-cursor",null,{"text":250,"minutes":251,"time":252,"words":253},"2 min read",1.905,114300,381,{"title":5,"description":240},{"loc":247},"posts\u002Fposts\u002Fcustom-cursor",[238,258,259,260],"博客","二开","样式","tech","2026-07-22 19:30:00","ovLe4X07Lw2yuLJF_yGnIPv8YyvRJ7QIAGTkCfKAV6Q",[265,269],{"title":266,"path":267,"stem":268,"date":239,"type":261,"children":-1},"Firefly 魔改：全局复制事件监听与提示浮层","\u002Fposts\u002Fcopy-toast","posts\u002Fposts\u002Fcopy-toast",{"title":270,"path":271,"stem":272,"date":262,"type":261,"children":-1},"Firefly 博客魔改记","\u002Fposts\u002Fcustomization-log","posts\u002Fposts\u002Fcustomization-log",1788712221314]