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

Question

I have set an image as a custom cursor for when you hover over a certain element. However, it's not showing and I can't figure out why.

span#me:hover {
    cursor: url("links/_moi.jpg"), auto;
    z-index: 2;
}

 <h2>My name is <span id="me">Natalie Taylor</span> and I am a graphic designer based in Frankfurt am Main, Germany.</h2>

Antonis Koursoumis · Accepted Answer · 2019-06-12T13:04:18.867

3

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.

edited Jun 12 '19 at 13:04

answered Jun 12 '19 at 12:37

1

I've updated it now but the image still isn't showing. Any other ideas? – Natalie Jun 12 '19 at 12:43
I think the issue is the icon size. You need it to be less than 32x32 to work. This is actually a Windows restriction as stated in this thread: (https://stackoverflow.com/a/6623948/2629954) Edited original answer. – Antonis Koursoumis Jun 12 '19 at 13:01
oH that's probably it then that would make a lot of sense. My image is quite a bit bigger haha. I guess I'll just have to do it with JS – Natalie Jun 12 '19 at 13:06

metaDesign · Answer 2 · 2019-06-12T12:43:31.223

2

# is used to target the element with a specific ID

. (dots) are used to target the element with a specific Class

Try

span#me:hover {
    cursor: url("links/_moi.jpg");
    z-index: 2;
}

edited Jun 12 '19 at 12:43

answered Jun 12 '19 at 12:36

metaDesign

ahh I changed it from a class to an id and forgot to update the css. I've updated it now but the image still isn't showing. Any other ideas? – Natalie Jun 12 '19 at 12:38
no, the correct image is showing up in brackets when I hover over it – Natalie Jun 12 '19 at 12:40
I've not seen ', auto' used before, try removing that? - Answer edited – metaDesign Jun 12 '19 at 12:42
@Natalie, I'm not sure but some browsers might not support jpg cursors or have a maximum resolution. Have you tried it with a `.cur` file? – Mark Baijens Jun 12 '19 at 12:46
i changed the file to .cur but it hasn't changed anything the mouse is still the text cursor when I hover it over :( – Natalie Jun 12 '19 at 13:01

asobak · Answer 3 · 2019-06-12T12:55:25.963

0

Try deleting span infront of ID, since ID is unique and can be used only once.

    #me:hover {
        cursor: url("links/_moi.jpg") auto;
        z-index: 2;
    }

Or try changing from ID to class and call it into your span.

    span .me:hover {
        cursor: url("links/_moi.jpg") auto;
        z-index: 2;
    }

 <h2>My name is <span class="me">Natalie Taylor</span> and I am a graphic designer based in Frankfurt am Main, Germany.</h2>

EDIT:

While changing it to pointer without an image it works, try checking if a path to image is correct and if image file is correct (.jpg, .png, ...)

.me:hover {
    cursor: url("links/_moi.jpg"), auto;
    z-index: 999;
}

<h2>My name is <span class="me">Natalie Taylor</span> and I am a graphic designer based in Frankfurt am Main, Germany.</h2>

edited Jun 12 '19 at 12:55

answered Jun 12 '19 at 12:43

asobak

Removing the span from it doesn't help :(. I had it as a class before and it wasn't working which is why I tried changing it to id – Natalie Jun 12 '19 at 12:45
I've edited my answer, maybe those colons were the problem. And try making .me class without :hover pseudo-class. – asobak Jun 12 '19 at 12:48
1

My best guess is that your image is causing problems, check if image is smaller or equal than 32x32. – asobak Jun 12 '19 at 13:07

score 0 · Answer 4 · answered Jun 12 '19 at 12:56

Looks like there's something wrong with the image you use or the location of the image. This one works with your code.

span#me:hover {
  cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
  z-index: 2;
}

<h2>My name is <span id="me">Natalie Taylor</span> and I am a graphic designer based in Frankfurt am Main, Germany.</h2>

4 Answers4