自定义 Cursor CSS 不适用于网页的某些部分

Question

I am trying to personalize the cursor of my webpage and managed to do so.我正在尝试个性化我网页的 cursor 并设法做到了。 However, there seem to be certain (random?) parts of the page where the cursor appears as the default version and not as the personalized cursor I had set.但是，页面的某些（随机？）部分 cursor 显示为默认版本，而不是我设置的个性化 cursor。 Does anyone know how I can resolve this?有谁知道我该如何解决这个问题？ I added a element in my HTML document to set the background picture of my site and also used it to set the cursor for the entire body of the page.我在我的 HTML 文档中添加了一个元素来设置我的网站的背景图片，并用它来设置整个页面的 cursor。 In my CSS file, I also specified that all links should be my personalized cursor (for some reason it otherwise did not show the personalized cursor on the links).在我的 CSS 文件中，我还指定所有链接都应该是我的个性化 cursor（由于某种原因，它没有在链接上显示个性化 cursor）。

Here is part of my code in case that is helpful:如果有帮助，这是我的代码的一部分：

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

And this code in the CSS file: a { cursor: url("speakercursor3.png"), auto;} CSS 文件中的这段代码： a { cursor: url("speakercursor3.png"), auto;}

Thank you so much for your help!非常感谢你的帮助！

Answer 1

So a few things you should check are the elements that are causing issues, check the CSS for those specific elements to make sure they don't have a cursor value set to them.因此，您应该检查的几件事是导致问题的元素，检查 CSS 以确保它们没有设置 cursor 值。

you can check this by inspecting the elements.您可以通过检查元素来检查这一点。 if you are positive that it is not CSS causing the problems, then u could also try js.如果您确定不是 CSS 导致问题，那么您也可以尝试 js。

Using js would be better in my opinion as u can make the cursor change more dynamically.在我看来，使用 js 会更好，因为你可以使 cursor 更动态地变化。

JQUERY CURSOR JQUERY CURSOR

 $(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

Browsers manage your cursor visibility outside of your <body> tag.浏览器在<body>标签之外管理您的 cursor 可见性。 On this jsfiddle sample you can see that when you are outside of the blue borders, your cursor will default.在这个jsfiddle示例中，您可以看到当您在蓝色边框之外时，您的 cursor 将默认。 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.当您太靠近边缘时，浏览器也会默认您的 cursor，或者在某些情况下，如果您的 cursor 超出浏览器，它将默认。 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.在您的特定情况下，您需要以不同的方式 position 您的元素或给您的身体足够的高度，以便您的元素包含在其中。 Latter is not ideal but for PoC here is the demo .后者并不理想，但对于 PoC，这里是演示。

自定义 Cursor CSS 不适用于网页的某些部分

问题描述

2 个解决方案

解决方案1
2

解决方案2
1 已采纳 2021-02-04 19:37:12

自定义 Cursor CSS 不适用于网页的某些部分

问题描述

2 个解决方案

解决方案1 2

解决方案2 1 已采纳 2021-02-04 19:37:12

解决方案1
2

解决方案2
1 已采纳 2021-02-04 19:37:12