react设置Cursor属性之url图片不展示原因

今天在设置鼠标为url地址图片时渲染区域鼠标形状没有显示,在控制台检查元素,url图片是有的,于是在网上一顿搜索,提示让用绝对路径,期间也将url换了网上的url地址,结果还是没有展示,如下:

确定了图片路径没问题后,看到有人说可能和图片大小也有关系,于是找了比较小尺寸的图片,发现是可以的。

下面介绍一下cursor image的尺寸,悬浮cursor不展示的小伙伴可以看一下是否是尺寸和引入img路径的原因。

How Big Should cursor image be?

about 32×32px

Cursor size: if the cursor image is over a certain size it will be ignored (in Gecko for example the limit is 128×128px). You should limit yourself about 32×32px anyway, for maximum compatibility with operating systems and platforms.

将鼠标设置成url图片方式:

import rowLineImg from '@/assets/images/rowLine.png';

<div style={{ cursor: `url(${rowLineImg}),auto` }} />
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值