自定义光标 CSS 在网页的某些部分不起作用

Question

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

非常感谢您的帮助！

Answer 1

所以您应该检查一些导致问题的元素，检查 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>

Answer 2

浏览器管理您在 <body> 标签之外的光标可见性。在这个 jsfiddle sample you can see that when you are outside of the blue borders, your cursor will default. Browser will also default your cursor when you are too close to the edges, or in some cases if your cursor goes outside of your browser, it will default. You can observe all in the sample. In your specific case you need to position your elements in a different way or give your body enough height so your elements are contained within it. Latter is not ideal but for PoC here is the demo.

自定义光标 CSS 在网页的某些部分不起作用

Custom Cursor CSS not working on certain parts of the webpage

html

css

mouse-cursor