如何修复悬停时不显示的自定义光标

Question

当您将鼠标悬停在某个元素上时，我已将图像设置为自定义光标。但是，它没有显示，我也不知道为什么。

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>

Answer 1

您的问题是span.me的范围是 class me，而跨度的是 id me。 / p>

编辑：此外，您还需要将图像尺寸调整为 32x32 像素以下。高于此的任何值都将被忽略。

Answer 2

#用于定位具有特定ID的元素

.（点）用于指定具有特定Class的元素

尝试

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

Answer 3

请尝试删除ID的跨度infront，因为ID是唯一的，并且只能使用一次。

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

或者尝试从ID更改为班级，然后将其称为您的跨度。

    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>

编辑：

在将其更改为没有图像的指针时，请尝试检查图像路径是否正确以及图像文件是否正确（.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>

Answer 4

您使用的图像或图像位置似乎有问题。这与您的代码一起使用。

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>