教程-为你的网站添加个性化的鼠标样式

很多时候，我们喜欢自己的网站能够更加个性化更有自己的风格，其中一个就是改变自己网站的鼠标样式，让其与众不同，那么如何进行更改呢，这个教程就是给大家讲一下如何为自己的博客添加上自己喜欢的鼠标样式。

第一步：

你需要百度（我也准备了几个在文末，不喜欢也可以自己百度找一找）去物色一款你自己喜欢的鼠标样式。其中，鼠标样式主要分为：普通指针样式和链接指针样式两类。找到两个喜欢的样式即可！鼠标样式文件的后缀名一般都是 “*.cur”(的任务，直接使用png格式一般也是可以的)

第二步：

将下载好的两个鼠标样式通过FlashFXP等软件上传到你网站的某一个目录中（比如你也可以直接扔进图床，然后使用链接引用），并且记住该目录的路径和文件名！因为第三步需要调用这两个文件。比如我的鼠标样式是放在github使用jsdelivr引用的。

第三步：

把以下代码添加到你网站主题样式的CSS中（wordpress可以直接添加到自定义css里面，hexo添加到主题文件下的stely.css里面，别的网站可以根据你的css文件自行添加），随便找个地方把代码贴进去就可以了。如果鼠标指针没有显示，把指针代码的default换成auto!important。

切记：代码括号里面为两个鼠标样式的文件路径（参考第二步骤）

/**普通指针样式  -栖枝perch**/  
body{
	cursor:url(https://www.5xiaobo.com/zb_users/theme/presence/mouse/default.cur),default; 
	}  
/**链接指针样式 -栖枝perch**/  
a:hover{
	cursor:url(https://www.5xiaobo.com/zb_users/theme/presence/mouse/pointer.cur),pointer;
	}

附柏竹更新的详细代码：

鼠标样式末端定义说明：
11.png 默认样式样式
22.png 链接打开样式
33.png 指示文本样式
url的值可以根据自己的图片链接设定
（建议图片大小：32x32像素）
body{
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/11.png"), default !important;
}
div {
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/11.png"), default !important;
}
a:hover {
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/22.png"), pointer !important;
}
a:hover span {
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/22.png"), pointer !important;
}
div:hover img {
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/22.png"), pointer !important;
}
div:hover span {
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/22.png"), pointer !important;
}
div:hover button {
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/22.png"), pointer !important;
}
div:hover textarea {
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/33.png"), pointer !important;
}
div:hover input {
    cursor: url("https://cdn.jsdelivr.net/gh/Sanscan12/Sanscan12.github.io/shubiao/33.png"), pointer !important;
}

第四步：

将修改好的CSS样式文件保存或上传即可。

至此，教程完毕，你抓紧去试试吧。

第五步：（一般人请忽略，大佬可以看看）

下面的css鼠标指针css样式表的一些属性：

如果你觉得我写的两种样式不够看，还不够炫。你可以发挥你的本领添加更多哦！！！

默认	default
文字/编辑	text
自动	auto
手形	pointer, hand(hand是IE专有)
可移动对象	move
不允许	not-allowed
无法释放	no-drop
等待/沙漏	wait
帮助	help
十字准星	crosshair
向上改变大小(North)	n-resize
向下改变大小(South)	s_resize 与n-resize效果相同
向左改变大小(West)	w-resize
向右改变大小(East)	e-resize 与w-resize效果相同
向左上改变大小（NorthWest）	nw-resize
向左下改变大小（SouthWest）	sw-resize
向右上改变大小（NorthEast）	ne-resize 与sw-resize效果相同
向右下改变大小（SouthEast）	se-resize 与nw-resize效果相同
自定义光标	url('光标地址')

这一段主要是说明关于鼠标的一些的属性，参考下面的html代码，你就只需要根据我上面提供的css样本，将html改写成css并且放入css文件即可。

<html>
<title>栖枝perch - 一个用心创造设计改变生活的设计师的个人博客网站</title>
<body>
<p>请把鼠标移动到左边的单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>

</html>

栖枝perch - 一个用心创造设计改变生活的设计师的个人博客网站

栖枝perch - 一个用心创造设计改变生活的设计师的个人博客网站 https://520526.xyz/

请把鼠标移动到单词上，可以看到鼠标指针发生变化：

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

第六步：我准备的一些鼠标样式下载

不喜欢也可以自己百度找一找

Comments | 14 条评论

博客作者十二
回复
发布于 2020-04-29 08:45 ( Google Chrome 81.0.4044.122 Windows 10 )( )
感谢, 找了好久的鼠标样式
- 博客作者栖枝perch
  回复
  发布于 2020-07-07 21:41 ( QQBrowser 6.2 Android 10 )( )
  @十二 ╰(◉ᾥ◉)╯✎▤
博客作者 1152251596
回复
发布于 2020-04-29 14:16 ( Google Chrome 80.0.3987.132 Windows 7 )( )
哈哈哈，干货，感谢分享
博客作者 1152251596
回复
发布于 2020-04-29 14:17 ( Google Chrome 80.0.3987.132 Windows 7 )( )
博客作者 Muze
回复
发布于 2020-04-29 15:26 ( Google Chrome 81.0.4044.122 Windows 10 )( )
感谢博主分享，我整理了一下，转载了。
https://www.npc.ink/15667.html
- 博客作者 1401339866
  回复
  发布于 2020-04-29 15:26 ( Google Chrome 81.0.4044.111 Android 10 )( )
  @Muze OK，嘿嘿，欢迎大佬转载
博客作者空灵.
回复
发布于 2020-05-04 01:58 ( QQBrowser 10.5.4039.400 Windows 10 )( )
我爱你
博客作者 shell
回复
发布于 2020-05-12 12:36 ( Google Chrome 81.0.4044.129 Windows 10 )( )
哈哈干货
博客作者 /╱Ｓòrγy⒈苆
回复
发布于 2020-07-07 14:57 ( Google Chrome 80.0.3987.163 Windows 10 )( )
感谢, 找了好久的鼠标样式
博客作者 losie
回复
发布于 2020-08-10 04:20 ( Google Chrome 84.0.4147.105 Windows 10 )( )
谢谢
博客作者 notfaze
回复
发布于 2020-10-09 10:37 ( Google Chrome 85.0.4183.121 Windows 10 )( )
谢谢分享
博客作者 notfaze
回复
发布于 2020-10-09 10:38 ( Google Chrome 85.0.4183.121 Windows 10 )( )
2333
博客作者 notfaze
回复
发布于 2020-10-09 10:38 ( Google Chrome 85.0.4183.121 Windows 10 )( )
干货
博客作者 smile
回复
发布于 2020-10-09 10:43 ( Edge 18.19041 Windows 10 )( )
评论取货，2333