car*_*arl 5 javascript reactjs react-jsx
如何使用 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>获取我的特殊光标，而“容器”<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' }}
/>
谢谢。
| 归档时间： |
|
| 查看次数： |
9936 次 |
| 最近记录： |