CSS Custom Cursor Doesn't Work in Ff/Chrome

CSS custom cursor doesn't work in FF/Chrome

The problem is not just with your css code lacking second argument but with the image file.

If you simply resize, make it smaller (i tried 32px for testing purposes) it works like a charm.

You might also want "pointer" rather than auto, judging by the look of the image;

cursor: url('http://anuary.com/dev/hp/pad3/public/images/hand-cursor.png'), pointer;

EDIT:
i realize now you wanted to keep the size but it just won't work. see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property for more info

CSS Custom cursor not working, does browsers not support it anymore?

As stated in MDN:

Syntax

This means that zero or more URLs may be specified (comma-separated),
which must be followed by one of the keywords defined in the CSS
specification, such as auto or pointer.

So try using:

body {
    cursor: url(cursor/NB_Arrow.cur), auto;
}

Problem with custom link cursor in Chrome

remove ":hover" on your selector.
your selector must be;

a{
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'),
auto; }

Custom cursor not working correctly in Chrome

For anyone interested, I solved this problem in the end though it's a bit of a hack.

I first tried using a blank cursor but then Chrome renders that as a black square.. so I decided to draw the target as part of the canvas and use a cursor which has hotspot at 0, 0 and is blank EXCEPT the 0, 0 tile which has the same colour as the target.

You can see the result here once you start the game, it's not a pretty solution, but works nonetheless.

How to fix a custom cursor that doesn't show on hover

Your issue is that span.me means a span with class me while you have a span with id me.

EDIT: In addition to this you need to have your image resized to under 32x32 pixels. Anything above that will be ignored.

Internal CSS Cursor URL Not Working, any tips?

There are limitations to what kind of images you can use as a custom cursor. As a reference check this link.
I would say your image is too big (maximum 32x32px).

Try the following code with a url to a placeholder image with 32px.

body {
height: 100vh;
width: 100vw;
   cursor:url(https://via.placeholder.com/32), auto;
   } 

HTML - Why is my custom css non-animated cursor is not showing up?

The reason they are not showing up is because the cursor's themselves are not defined, you'll have to define them by adding the cursor names at the end.

Here is a list of the cursor names:

alias
all-scroll
auto
cell
context-menu
col-resize
copy
crosshair
default
e-resize
ew-resize
grab
grabbing
help
move
n-resize
ne-resize
nesw-resize
ns-resize
nw-resize
nwse-resize
no-drop
none
not-allowed
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
url
w-resize
wait
zoom-in
zoom-out

This is how they should be implemented

html, body {
  cursor: url(images/minired/ayes/purp.cur), default;
  cursor: url(images/minired/ayes/help.png), help;
  cursor: url(images/minired/ayes/move.gif), move;
  cursor: url(images/minired/ayes/text.jpg), text;
}

SOURCE: Here is a link to a working DEMO.

---

Related Topics