Html 自定义光标CSS不适用于网页的某些部分

我试图个性化我的网页光标，并设法做到这一点。但是，页面中似乎有某些（随机的？）部分的光标显示为默认版本，而不是我设置的个性化光标。有人知道我如何解决这个问题吗？我在HTML文档中添加了一个元素来设置网站的背景图片，还使用它来设置整个页面的光标。在我的CSS文件中，我还指定所有链接都应该是我的个性化光标（出于某种原因，它没有在链接上显示个性化光标）

以下是我的代码的一部分，以防对您有所帮助：

<style>
body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
cursor: url("speakercursor3.png"), auto;
}
</style> 

身体{
背景图片：url（“background.jpg”）；
背景重复：无重复；
背景附件：固定；
背景尺寸：封面；
光标：url（“speakercursor3.png”），自动；
}

CSS文件中的以下代码：

a{cursor:url（“speakercursor3.png”），auto；}

---

非常感谢你的帮助

因此，您应该检查导致问题的元素，检查CSS中的特定元素，确保它们没有设置光标值

您可以通过检查元素来检查这一点。如果你肯定不是CSS引起的问题，那么你也可以试试js

在我看来，使用js会更好，因为你可以使光标更动态地变化

JQUERY光标

$（document）.on（'mousemove'，函数（e）{
$（'.cursor'）.css（'top'，e.pageY）；
$（'.cursor'）.css（'left'，e.pageX）；
$（“a”）.mouseenter（函数（）{
$（“.cursor”）.addClass（“链接”）；
});
$（“a”）.mouseleave（函数（）{
$（“.cursor”）.removeClass（“链接”）；
});
$（“按钮”）.mouseenter（函数（）{
$（“.cursor”）.addClass（“按钮”）；
});
$（“按钮”）.mouseleave（函数（）{
$（“.cursor”）.removeClass（“按钮”）；
});
});
/*鼠标光标*/
.光标{
宽度：10px；
高度：10px；
背景：#000；
边框：纯色2px白色；
边界半径：100%；
位置：固定；
z-index:100000；/*这是为了确保这是最上面的元素，如果光标在其他元素下，请将其变大*/
变换：平移（-50%，-50%）；/*这是将鼠标光标居中*/
光标：无；/*这是隐藏默认光标*/
指针事件：无；/*这是为了使光标仍然可以与元素交互*/
过渡时间：000ms；
}
/*到处隐藏默认光标*/
* {
光标：无；
}
.链接{
边框颜色：#5f5；
}
.按钮{
边框颜色：#ff5555；
}
身体{
overflow-x:hidden；/*这样，如果光标位于页面边缘，它就不会离开正文*/
}

单击
，您应该检查导致问题的元素，检查CSS中的特定元素，确保它们没有设置光标值

您可以通过检查元素来检查这一点。如果你肯定不是CSS引起的问题，那么你也可以试试js

在我看来，使用js会更好，因为你可以使光标更动态地变化

JQUERY光标


$（document）.on（'mousemove'，函数（e）{
$（'.cursor'）.css（'top'，e.pageY）；
$（'.cursor'）.css（'left'，e.pageX）；
$（“a”）.mouseenter（函数（）{
$（“.cursor”）.addClass（“链接”）；
});
$（“a”）.mouseleave（函数（）{
$（“.cursor”）.removeClass（“链接”）；
});
$（“按钮”）.mouseenter（函数（）{
$（“.cursor”）.addClass（“按钮”）；
});
$（“按钮”）.mouseleave（函数（）{
$（“.cursor”）.removeClass（“按钮”）；
});
});
/*鼠标光标*/
.光标{
宽度：10px；
高度：10px；
背景：#000；
边框：纯色2px白色；
边界半径：100%；
位置：固定；
z-index:100000；/*这是为了确保这是最上面的元素，如果光标在其他元素下，请将其变大*/
变换：平移（-50%，-50%）；/*这是将鼠标光标居中*/
光标：无；/*这是隐藏默认光标*/
指针事件：无；/*这是为了使光标仍然可以与元素交互*/
过渡时间：000ms；
}
/*到处隐藏默认光标*/
* {
光标：无；
}
.链接{
边框颜色：#5f5；
}
.按钮{
边框颜色：#ff5555；
}
身体{
overflow-x:hidden；/*这样，如果光标位于页面边缘，它就不会离开正文*/
}

单击
浏览器在标签外部管理光标可见性。在这个示例中，您可以看到，当您位于蓝色边框之外时，您的光标将处于默认状态。当您离边缘太近时，浏览器也会默认使用光标，或者在某些情况下，如果光标超出浏览器，则默认使用光标。你可以观察样品中的所有成分。在你的特殊情况下，你需要以不同的方式来定位你的元素，或者给你的身体足够的高度，这样你的元素就包含在其中了。后者并不理想，但对于PoC来说，这里是。
浏览器在
标记之外管理光标可见性。在这个示例中，您可以看到，当您位于蓝色边框之外时，您的光标将处于默认状态。当您离边缘太近时，浏览器也会默认使用光标，或者在某些情况下，如果光标超出浏览器，则默认使用光标。你可以观察样品中的所有成分。在你的特殊情况下，你需要以不同的方式来定位你的元素，或者给你的身体足够的高度，这样你的元素就包含在其中了。后者并不理想，但对于PoC来说，这里是一个示例。
请添加一个JSFIDLE示例，包括您的图像并复制您的案例。游标有一定的大小限制，具体取决于浏览器，您可以在此处找到详细信息：。这里有一个