怎么添加个性化的鼠标样式? - css笔记

其实所谓的个性化鼠标,就是一个个的图片,用自己喜欢的鼠标样式图片去覆盖默认的鼠标样式就好啦

其实所谓的个性化鼠标,就是一个个的图片,用自己喜欢的鼠标样式图片去覆盖默认的鼠标样式就好啦。

这里需要用到CSS的 cursor 属性,首先,你需要找到一些有趣的鼠标图片,参考下方代码:

<style type="text/css">
/**普通指针样式  -栖枝perch**/  
body{
    cursor:url(./img/default.cur),default; 
}  
/**链接指针样式 -栖枝perch**/  
a:hover{
    cursor:url(./img/pointer.cur),pointer;
}
</style>

如何使用?

点击下方的Demo按钮,右击鼠标查看源代码,根据代码注释理解相关含义。

帮助:

演示中仅用了:hover,其实还有很多有趣的鼠标状态,下文有详细介绍:

怎么添加个性化的鼠标样式? - css笔记-Npcink
怎么添加个性化的鼠标样式? - css笔记-Npcink

cursor:CSS鼠标效果手型效果 - css笔记

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
网站

Matomo - 自建网站统计

2018-11-4 20:12:23

随记

Chrome扩展程序下载程序-如何下载Chrome扩展到本地?

2018-12-23 20:17:20

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索