前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在CSS中自定义鼠标样式

如何在CSS中自定义鼠标样式

原创
作者头像
用户1094633
发布2022-02-14 17:17:49
2.1K0
发布2022-02-14 17:17:49
举报
文章被收录于专栏:运维随笔运维随笔

前言

想着美化下自己的个人部落格,那就先从鼠标样式开始美化吧,默认的鼠标样式有点单调,那应该如何美化呢?

鼠标样式

1、首先下载鼠标样式(博客系统中一般用的都是系统默认的鼠标和点击链接的样式,我们点击访问致美化提供的鼠标样式https://zhutix.com/tag/cursors/)

image.png
image.png

教学内容

PS:一般用.cur格式的(ani格式的不起作用)。有能力的也可以自己PS两张鼠标样式

2、把喜欢的鼠标样式下载到本地,然后上传到网站目录下,比如图片存放目录或者主题images的文件夹中(鼠标样式存储样式可以随意,不限制)

3、站长这边以本站博客为例,进入博客后台主题设置 >> 首页设置 >> 自定义CSS >> 填写如下CSS(其他博客或者网站自行修改style.css样式表即可)

CSS

代码语言:javascript
复制
/*鼠标样式开始*/
/*鼠标指针样式*/
body{cursor:url(/zb_users/upload/img/pointer.cur),default;}
/*鼠标链接指针样式*/
a:hover{cursor:url(/zb_users/upload/img/link.cur),pointer;}
/*鼠标样式结束*/

注意鼠标样式路径修改为刚刚上传的存放目录路径

4、清空浏览器缓存(如有CDN,则更新CDNstyle.css文件缓存

5、效果预览

image.gif
image.gif

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 鼠标样式
  • 教学内容
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档