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

【问题标题】：Custom Cursor CSS not working on certain parts of the webpage自定义光标 CSS 不适用于网页的某些部分
【发布时间】：2021-05-09 00:05:19
【问题描述】：

我正在尝试个性化我的网页光标并设法做到了。但是，页面的某些（随机？）部分光标显示为默认版本，而不是我设置的个性化光标。有谁知道我该如何解决这个问题？我在我的 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;}

非常感谢您的帮助！

【问题讨论】：

请添加一个 jsfiddle 示例，包括您的图像并复制您的案例。光标有一定的大小限制，具体取决于浏览器，您可以在此处找到详细信息：developer.mozilla.org/en-US/docs/Web/CSS/…。这是一个小提琴复制大小限制：jsfiddle.net/taq85916
jsfiddle.net/wpz0rhe6/11 我不确定这是否是您想要的，因为我从未使用过 jsfiddle（再次抱歉，对游戏非常陌生）。我不得不将我的光标图像更改为您在建议中发送的图像，因为我的不在网上。自定义光标未出现在 jsfiddle 的最后 2 个链接上，但它在我的网站上消失了（我假设它是光标图像的大小）。光标不工作的其他地方与我的页面上的相同。我已经尝试将大小限制为 30x30 像素，但遗憾的是没有任何改变。非常感谢您的帮助:)

标签： html css mouse-cursor

【解决方案1】：

浏览器在<body> 标记之外管理您的光标可见性。在这个jsfiddle 示例中，您可以看到当您在蓝色边框之外时，您的光标将默认。当您离边缘太近时，浏览器也会默认您的光标，或者在某些情况下，如果您的光标超出浏览器，它将默认。您可以观察样本中的所有内容。在您的特定情况下，您需要以不同的方式定位元素或给您的身体足够的高度，以便您的元素包含在其中。后者并不理想，但对于 PoC，这里是 demo。

【讨论】：

这有效 - 非常感谢！让我开心:))

【解决方案2】：

因此，您应该检查的几件事是导致问题的元素，检查这些特定元素的 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>

【讨论】：