博客园怎么自定义鼠标样式？总有部分地方替换不成功？

本文帮助你学会修改博客园的鼠标样式，并且解决部分按钮样式替换不成功的问题

前言

我使用的样式：

问题

很多博客给的教程修改过后会出现，虽然大部分情况下都是正常的，但是在某些特定的地方上鼠标又恢复了默认样式

• 正常
  
• 变成默认
  

解决方案

在博客后台的页面定制css代码中添加，并且记得勾选禁用模板默认CSS

body {cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),auto!important;}
body {cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),pointer!important;}
a:hover{cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),auto!important;}
button:hover{cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),auto!important;}
i:hover{cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),auto!important;}

为什么要这样做

为什么有button和i标签

大部分教程就给到前三行代码

body {cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),auto!important;}
body {cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),pointer!important;}
a:hover{cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),auto!important;}

我们发现在这些特殊的地方鼠标样式无法使用，先想想我们的css中是不是没有针对他们做处理
我们右键这些地方，点击检查。我们发现这个地方（问题中的例子）其实是一个button

显然是我们没有处理到的，所以需要在css中加入

button:hover{cursor:url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),auto!important;}

剩下的自己按照上面的办法排查一下就好了

为什么要加!important

什么是important：
使用一个 !important 规则时，此声明将覆盖任何其他声明。

在我实际调试的过程中，我发现还是会出现样式错误，我排查了一下，发现是我使用的模板当中别人已经声明过了，相当于冲突了。

解决办法也显而易见了——把使用的css模板中的声明全部修改。但是我懒得全部排查了，所以直接给自己的声明加个!important