问题描述
我正在尝试对我的网页的光标进行个性化设置，并设法做到了。但是，页面的某些（随机？）部分似乎光标显示为默认版本，而不是我设置的个性化光标。有谁知道我该如何解决这个问题？我在我的 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>
CSS 文件中的这段代码：
a { cursor: url("speakercursor3.png"),auto;}
非常感谢您的帮助！
解决方法
因此，您应该检查导致问题的元素，检查这些特定元素的 CSS 以确保它们没有设置光标值。
您可以通过检查元素来检查这一点。如果您确定不是 CSS 导致问题，那么您也可以尝试使用 js。
我认为使用 js 会更好，因为您可以使光标更动态地变化。
JQUERY 光标
$(document).on('mousemove',function(e){
$('.cursor').css('top',e.pageY);
$('.cursor').css('left',e.pageX);
$("a").mouseenter(function() {
$(".cursor").addClass("link");
});
$("a").mouseleave(function() {
$(".cursor").removeClass("link");
});
$("button").mouseenter(function() {
$(".cursor").addClass("button");
});
$("button").mouseleave(function() {
$(".cursor").removeClass("button");
});
});/* mouse cursor */
.cursor {
width: 10px;
height: 10px;
background: #000;
border: solid 2px white;
border-radius: 100%;
position: fixed;
z-index: 100000; /* this is to make sure this is the top most element make this bigger if the cursor is going under other elements */
transform: translate(-50%,-50%); /* this is to center the mouse cursor */
cursor: none; /* this is to hide the default cursor */
pointer-events: none; /* this is to make it so that the cursor can still interact with elements */
transition-duration: 000ms;
}
/* hide default cursor everywhere */
* {
cursor: none;
}
.link {
border-color: #5f5;
}
.button {
border-color: #ff5555;
}
body {
overflow-x: hidden; /* this is so that if the cursor is on the edge of the page,it will not axpand the body */
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>
<a href="">LINK</a>
<button>CLICK</button>浏览器管理 <body> 标签之外的光标可见性。在此 jsfiddle 示例中，您可以看到当您位于蓝色边框之外时，您的光标将处于默认状态。当您离边缘太近时，浏览器也会默认您的光标，或者在某些情况下，如果您的光标超出浏览器，它将默认。您可以在样本中观察所有内容。在您的特定情况下，您需要以不同的方式定位您的元素或为您的身体提供足够的高度，以便您的元素包含在其中。后者并不理想，但对于 PoC 而言，这里是 demo。