如何使用 JSX 内联样式指定自定义鼠标光标？
这很好用:
<Component
style={{ cursor: 'crosshair' }}
/>
但我似乎无法得到任何类似的东西
<Component
style={{ cursor: 'url(images/special.cur)' }}
/>
工作。在其他地方，我成功地从同一位置获取了静态图像
<img
src="images/example.png"
/>
所以我相信服务器设置正确。
我已经尝试过 Chrome、Firefox 和 IE 11。
我知道一定是在做一些根本性的错误。我该怎么做？
非常感谢!
编辑
(StackOverflow 似乎不赞成继续评论线程，所以让我将 Josh 的最新观点作为编辑来解决。)
是的，一个纯 HTML 元素获得自定义光标。我同意这一定是语法问题，但是 cursor: url(file) 的正确 语法是什么？在 JSX 中？这就是我想要弄清楚的。再次感谢!
<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 添加了很多样式，但我不认为他们会在这种情况下“获胜”，对吗？
最佳答案
我相信我已经弄明白了。有两件事不对劲，乔希指出了其中一件。对不起，如果有人在这上面浪费了很多时间，但为了记录:
基本问题是我使用了在线图像转换器将图像转换为 .cur 格式，现在我认为它返回的是损坏的或至少是不完整的 .cur 文件。
当我按照 Josh 的建议尝试使用 .png 格式而不是后备值时，我可以让自定义光标在 Chrome 和 Firefox 上工作。我将不得不找到一些更好的工具来为 IE 制作一个合适的 .cur 文件，因为它只支持 .cur(和 .ani)格式。我能够使用我在网上找到的另一个 .cur 文件，该文件与 IE 一起工作，如文档所述。
[我知道我说过我能够在 React 之外使用带有纯 HTML 的“不合适的”.cur 文件；我一定是同时尝试了太多事情。今天我也做不到。对于误导性的回复，我们深表歉意。]
所以 JSX 除了一个有效的光标图像文件和一个后备内置光标之外不需要任何特殊的东西。
<Component
style={{ cursor: 'url(images/special.png),auto' }}
/>
谢谢。
关于javascript - 如何使用 JSX 样式指定自定义鼠标光标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34795739/