question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setting cursor url doesn't work

See original GitHub issue

This is probably just user error, but I don’t see anything in the docs. When I do:

cursors: {
                mouseover: "url('../some/path.png')",
},  

Nothing shows up, though the url is correct and also this does work:

cursors: {
                mouseover: "pointer",
},  

Is there a different URL syntax?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
r0flscommented, Dec 12, 2016

I think the problem was that I wasn’t using valid css:

This worked:

       cursors: {
                mouseover: "url(../assets/cursor.png), auto",
            },  

This didn’t

       cursors: {
                mouseover: "url(../assets/cursor.png)",
            },  

Thanks again for your help and for writing this library. I’m closing this issue, but I think an example using a URL in the docs would be helpful 😃 Are those open source? I can add it if they are…

1reaction
caleb531commented, Dec 12, 2016

Your syntax is correct. Any valid CSS cursor value is accepted.

I would first check the console to ensure that a 404 isn’t being thrown—I suspect your relative path may not be pointing where you think. Because the cursors property applies a CSS cursor to the <canvas> element, and because that <canvas> element resides in your HTML document, the cursor path will be relative to your HTML document.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS custom cursor doesn't work in FF/Chrome - Stack Overflow
The reason this is not working is maybe that you're doing this: cursor:url(https://example.com/example.png) You have to add , auto after the ...
Read more >
2 Ways to Fix Your Custom Cursor if it's Not Working in Chrome
1. Reinstall the extension ; Click on the Extensions icon in the Toolbar, and select Manage extensions.
Read more >
CSS custom cursor doesn t work in FF Chrome - Edureka
I'm trying to make a custom cursor out of the image below: http://anuary.com/dev/hp/pad3/public ... ) Is there a reason why it isn't ...
Read more >
Solved - css cursor:url not working - Tech Support Guy
If the url file does not exist, it works correctly, that is, the cursor is the "pointer" cursor.
Read more >
How to use Custom Cursor for Chrome
Q: How to install Custom Cursor? · Go to Chrome Web Store. Click here to go to official Chrome Web Store · Add...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found