javascript – 如何使用JSX样式指定自定义鼠标光标

2023年6月2日 261次阅读

如何使用JSX内联样式指定自定义鼠标光标？

这很好用：

<Component
 style={{ cursor: 'crosshair' }}
/>

但我似乎无法得到任何东西

<Component
 style={{ cursor: 'url(images/special.cur)' }}
/>

上班.在其他地方,我成功地从同一位置获取静态图像

<img
 src="images/example.png"
/>

所以我相信服务器设置正确.

我试过Chrome,Firefox和IE 11.

我知道必须做一些根本错误的事情.我该怎么做呢？

非常感谢！

编辑

(StackOverflow似乎不赞成继续评论帖子,所以让我把Josh的最新观点作为编辑来解决.)

是的,纯HTML元素获取自定义光标.我同意它必须是一个语法问题,但是什么是游标的正确语法：JSX中的url(文件)？这就是我想弄清楚的.再次感谢！

<body>
    <input style="cursor: url(images/special.cur),auto;" type="img" src="images/example.png" />    
    <div id="container"></div>
...
</body>

其中< input>得到我的特殊光标和“容器”< div>是我的React组件的呈现位置.

我也意识到我之前没有提到我正在为我的界面使用React-Bootstrap组件.我知道Bootstrap添加了很多样式,但我不认为他们会在这种情况下“赢”,是吗？

最佳答案 我相信我想出来了.有两件事是错的,Josh指出其中一件事.对不起,如果有人浪费了很多时间,但记录：

基本问题是我使用在线图像转换器将图像转换为.cur格式,我现在认为它会返回损坏或至少不合适的.cur文件.

当我尝试使用.png格式而不是Josh建议的后备值时,我可以让自定义游标在Chrome和Firefox上运行.我将不得不找到一些更好的工具来为IE制作一个合适的.cur文件,因为它只支持.cur(和.ani)格式.我能够使用我在网上找到的另一个.cur文件,它可以与IE一起工作.

[我知道我说我能够在React之外使用我的“不足”.cur文件和纯HTML;我一定是在尝试太多东西.今天我也无法做到这一点.对不起有误导性的回复.]

因此,除了有效的游标图像文件和后备内置游标之外,JSX不需要任何特殊的东西.

<Component
 style={{ cursor: 'url(images/special.png),auto' }}
/>

谢谢.

点赞