前端自定义鼠标样式

时间:2022-01-11 来源:未知网络 作者:996建站网

有的时候,cursor规定的鼠标样式可能不满足我们的页面要求,这时我们需要自定义鼠标样式。

这里我以“禁止选择”为例。

首先去找一个适合网页的图片,可以是PNG,可以是JPG,等等(我只试过PNG和JPG格式,大家如果尝试别的格式有问题,我们可以交流)。

我选择了PNG图

前端自定义鼠标样式插图

鼠标样式图我习惯于用cur格式,因为兼容性好。然后把找好的图片拖放到PS中,点击“文件”–“存储为”,选择ICO格式

前端自定义鼠标样式插图1

接下来一定要记住要图片后缀名改为“cur”,

前端自定义鼠标样式插图2

选择“Standard ICO(use for favicon.ico)”,然后“确定”

前端自定义鼠标样式插图3

把后缀名为“cur”的图片放到你的“images”文件中(我习惯放在这里,大家也可以有自己的习惯,哈哈)。

最后!

前端自定义鼠标样式插图4

然后就可以在网页中看到我们自定义的鼠标样式了。

PS:我看到很多讲解中要求url中必须放绝对路径,我放相对路径和绝对路径,结果都出来 了,如果有了解这块的大神,希望教教我。

前端自定义鼠标样式插图5

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序