今天在设置鼠标为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` }} />