Question

如何使用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中cursor: url(file)的正确语法是什么？这就是我想要弄清楚的。再次感谢！

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

<input>获取我的特殊光标和＆＃34;容器＆＃34; <div>是我的React组件的呈现位置。

我也意识到我之前没有提到过我正在为我的界面使用React-Bootstrap组件。我知道Bootstrap增加了很多风格，但我不认为他们会赢得＃34;在这种情况下，他们会吗？

Answer 1

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

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

当我尝试使用.png格式而不是带有后备值时，我可以将自定义游标用于Chrome和Firefox。我将不得不找到一些更好的工具来为IE制作一个合适的.cur文件，因为它只支持.cur（和.ani）格式。我能够使用我在网上找到的另一个.cur文件，它可以与IE一起工作。

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

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

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

感谢。