如何在CSS中自定义自己博客的鼠标样式?

投稿   天真网  2018-01-31 10:23:20  112 人阅读  26 条评论

今天来到天真网的朋友,可能会发现不一样的地方,那就是本站的鼠标样式换了。嘿嘿,这个是天真特意换的,毕竟默认的鼠标样式太死板不是!如果你也想和天真一样,想对自己博客的默认鼠标样式进行美化,那么请继续往下看吧!

如何在CSS中自定义自己博客的鼠标样式? 海纳百川 第1张

第一步:大家要去找两个比较好看的鼠标指针(博客中一般也就是用到默认鼠标和点击链接的鼠标样式)。你也可以下载本站使用的,或者直接前往系统之家分享的1067个鼠标指针挑选(点此直达访问其他鼠标指针的样式)。

注意:一般是cur格式的(ani格式的不起作用),当然你选择png格式也行,有能力的完全也可以自己ps两个。

第二步:将所需鼠标指针下载到本地然后上传到你的网站,比如存放在主题文件 images 文件夹中。(路径可以随意,等第三步记得填写正确的路径即可)。

第三步:这里也以WP博客为例,其他博客自行修改样式表即可。进入WP博客后台,点击外观 >> 编辑(一般默认都是正在使用主题的style.css样式)>> 把以下代码添加到 style.css 文件中更新保存即可。

  1. /** 鼠标样式 开始**/
  2. /** 普通指针样式**/
  3. body {cursorurl(http://tzw520.cn/wp-content/themes/Blogs/images/Arrow.cur), default;}
  4.  /** 链接指针样式**/
  5. a:hover{cursor:url(http://tzw520.cn/wp-content/themes/Blogs/images/help.cur), pointer;}
  6. /** 鼠标样式 结束**/
注意:记得修改以上代码的鼠标指针路径哦。

第四步:清空浏览器缓存,更新缓存插件和 CDN 的 style.css 文件的缓存,这样就大功告成了,在博客网站前台就可以看到我们鼠标已经变得更漂亮更有个性了。

拓展阅读

本文只分享了默认鼠标和链接鼠标的样式,而我们一般下载的鼠标指针都包含了很多种情况下的鼠标指针,所以如果想要在博客网站上显示整套的鼠标指针,那么只需要根据需要按照上述添加链接鼠标指针的方法添加相应的CSS代码即可。具体鼠标指针的值如下:

如何在CSS中自定义自己博客的鼠标样式? 海纳百川 第2张

以上各个值对应的鼠标指针样式请移步体验:鼠标指针变化

历史上的今天:

文章标签: ,   ,   ,  
原文地址:http://tzw520.cn/meihualexiashubiaozhizhen/
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 天真网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
天真网

相关文章 分类热门分类热评最新问答

 发表评论


  1. Monicfenga
    Monicfenga 【书童】 @回复

    说实在的,这个“自定义鼠标样式”其实挺“恼人”的(至少是我觉得)
    且很庆幸,不止我一个人这么认为

  2. 水云间
    水云间 【小白】 @回复

    正式应用环境下还是最好不要随意改变鼠标样式的好。

  3. 面料
    面料 【书童】 @回复

    蛮有个性的

  4. 来语直搜
    来语直搜 【秀才】 @回复

    想起那个谈论“特效”代码的年代,曾经觉得“这么神奇!”。

  5. 90客栈
    90客栈 【进士】 @回复

    我觉的没必要搞这么花哨吧

    • 友链博客
      友链博客 【小白】2018-02-01 13:05  回复

      @90客栈嗯,我也不太喜欢太个性化的

  6. 江西养牛人
    江西养牛人 【小白】 @回复

    个人喜欢吧,我还是觉得默认的耐看,但是能够有一些个性化的我也觉得可以接受,这样才能突出博主的个性所在

    • 懿古今
      懿古今【村长】2018-02-01 11:51  回复

      @江西养牛人是的,关键是看个人,喜欢个性化就折腾,去找一个自己喜欢的鼠标指针,然后就可以美化了。

  7. 米扑博客
    米扑博客 【进士】 @回复

    赞,漂亮

  8. 蝈蝈要安静
    蝈蝈要安静 【秀才】 @回复

    额,每次浏览自定义鼠标样式的网站都觉的很别扭。

  9. 西枫里博客
    西枫里博客 【进士】 @回复

    这很狂放~ [偷笑]

  10. 金选网赚博客
    金选网赚博客 【小白】 @回复

    这个很酷啊

  11. 银色月航
    银色月航 【状元】 @回复

    都收采用默认的,很少diy

  12. 网赚博客
    网赚博客 【小白】 @回复

    支持一下!

  13. 明月登楼
    明月登楼 【尚书】 @回复

    这个我总是感觉网站定制属于自己的鼠标样式很Low的感觉!

  14. Mr.li
    Mr.li 【举人】 @回复

    不是我不想,真觉得不比原始的鼠标好看

  15. 值品分享
    值品分享 【秀才】 @回复

    没有必要吧,这个。

  16. 网贷口子
    网贷口子 【书童】 @回复

    这个可以有 [赞] [亲亲]

  17. 玉苏子
    玉苏子 【秀才】 @回复

    这个不错

  18. 沈唁志
    沈唁志 【状元】 @回复

    666 我去换个滑稽的试试

  19. 风紧扯乎
    风紧扯乎 【举人】 @回复

    学习了,不过我还是比较喜欢默认的样式,虽然B格不高吧,但是很实用