javascript - How to specify custom mouse cursor with JSX style

How can I specify a custom mouse cursor using a JSX inline style?

This works fine:

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

but I cannot seem to get anything along the lines of

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

to work. Elsewhere I am successfully getting static images from the same location

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

so I believe the server is set up properly.

I've tried Chrome, Firefox, and IE 11.

I know must be doing something fundamentally wrong. How do I do this?

Thanks very much!

EDIT

(StackOverflow seems not to approve of the continued ment thread so let me address Josh's latest point as an edit instead.)

Yes, a plain HTML element gets the custom cursor. I agree it must be a syntax problem, but what is the correct syntax for cursor: url(file) in JSX? That is what I'm trying to figure out. Thanks again!

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

where the <input> gets my special cursor and the "container" <div> is where my React ponents are rendered.

I also realize that I hadn't mentioned before that I am using React-Bootstrap ponents for my interface. I know that Bootstrap adds lots of styles but I wouldn't think they would "win" in this case, would they?

How can I specify a custom mouse cursor using a JSX inline style?

This works fine:

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

but I cannot seem to get anything along the lines of

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

to work. Elsewhere I am successfully getting static images from the same location

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

so I believe the server is set up properly.

I've tried Chrome, Firefox, and IE 11.

I know must be doing something fundamentally wrong. How do I do this?

Thanks very much!

EDIT

(StackOverflow seems not to approve of the continued ment thread so let me address Josh's latest point as an edit instead.)

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

where the <input> gets my special cursor and the "container" <div> is where my React ponents are rendered.

Share Improve this question edited Jan 30, 2016 at 11:55 Dmitry Shvedov 3,3164 gold badges40 silver badges56 bronze badges asked Jan 14, 2016 at 17:18 carl 4331 gold badge7 silver badges12 bronze badges

What is the output in the DOM? – Josh David Miller Commented Jan 14, 2016 at 18:20
I just see the default cursor. By the way, I see no errors from the developer console in the browsers I've tried and no errors from babelify. – carl Commented Jan 14, 2016 at 22:44
No, I meant what do you see on the DOM element? What does the style property look like? – Josh David Miller Commented Jan 14, 2016 at 22:51
Oh, I see. Using Chrome, I see cursor: auto; for the <input> element that React builds in the DOM. FWIW, I see cursor: "url(images/special.cur)" among the props of the React ponent using the React developer window. However, using Firefox, I actually see cursor:url(images/special.cur) in the DOM inspector. – carl Commented Jan 14, 2016 at 23:21
I think you need to provide a fallback value, if I'm reading the docs right. Try url(images/special.cur), auto instead. – Josh David Miller Commented Jan 14, 2016 at 23:26

| Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

I believe I figured this out. There were two things wrong, and Josh pointed one of them out. Sorry if anyone wasted much time on this, but for the record:

The basic problem is that I used an online image converter to convert an image to .cur format and I now believe it returns corrupt or at least inadequate .cur files.

When I tried .png format instead with a fallback value as Josh suggested, I can make custom cursors work on Chrome and Firefox. I will have to find some better tool to make a proper .cur file for IE still as it only supports the .cur (and .ani) formats. I was able to use another .cur file I found online somewhere which does work with IE as documented.

[I know that I said I was able to use my "inadequate" .cur file with plain HTML outside of React; I must have been trying too many things at once. Today I can't make that work either. Sorry for the misleading reply.]

So JSX doesn't require anything special other than a valid cursor image file and a fallback built-in cursor.

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

Thanks.

For anyone else who finds this off Google, here is everything you need to do:

Put the cursor image in your public (not src) folder
Add style={{cursor: 'url(cursor.png),auto'}} to your ponent

Full example:

public/
- cursor.png
- 404.html
- favicon.ico
- etc
src/
- App.js

App.js:

import React from 'react';

function App() {
  return (
    <div style={{cursor: 'url(cursor.png), auto'}}>
      Mouse over me for your custom cursor!
    </div>
  );
}

export default App;

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to specify custom mouse cursor with JSX style - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)