Custom cursor disappears when hovering into the screen

Question

I have a custom cursor on my page, but it disappears when hovering into the screen. It will appear for a millisecond when moving the cursor from outside the window onto the body, then disappear. How can I get the custom cursor to work?

body {
  font-family: "Quicksand", sans-serif;
  margin: 0;
  padding: 0;
  cursor: url("https://via.placeholder.com/50x50/000/fff"), auto;
}

main {
  max-width: auto;
  margin: auto;
  cursor: url("https://via.placeholder.com/50x50/000/fff"), auto;
}

footer {
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  cursor: url("https://via.placeholder.com/50x50/000/fff"), auto;
}

img {
  max-width: 100%;
  height: auto;
  display: table;
  margin-left: auto;
  margin-right: auto;
  cursor: url("https://via.placeholder.com/50x50/000/fff"), auto;
}

<main>
  <section class="test">
    <img src="https://via.placeholder.com/200x100" alt="test" />
    <img src="https://via.placeholder.com/200x100" alt="test" />
    <img src="https://via.placeholder.com/200x100" alt="test" />
    <img src="https://via.placeholder.com/200x100" alt="test" />
    <img src="https://via.placeholder.com/200x100" alt="test" />
  </section>
</main>
<footer>
  <p>Lasse Unke - 2022.</p>
</footer>

Answer 1

It looks like the cursor isn't displaying when you hover over the text.

I hope this is your problem.

I set the cursor for * to the custom cursor and set it to !important

EDIT: For some reason the cursor isn't working in the snippet. Here is a jsfiddle link: https://jsfiddle.net/odajb362/

body {
  font-family: "Quicksand", sans-serif;
  margin: 0;
  padding: 0;
}

main {
  max-width: auto;
  margin: auto;
}

footer {
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

img {
  max-width: 100%;
  height: auto;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

* {
  cursor: url("https://via.placeholder.com/50x50/000/fff"), auto !important;
}

<main>
  <section class="test">
    <img src="https://via.placeholder.com/200x100" alt="test" />
    <img src="https://via.placeholder.com/200x100" alt="test" />
    <img src="https://via.placeholder.com/200x100" alt="test" />
    <img src="https://via.placeholder.com/200x100" alt="test" />
    <img src="https://via.placeholder.com/200x100" alt="test" />
  </section>
</main>
<footer>
  <p>Lasse Unke - 2022.</p>
</footer>

Hope this solves your problem

Have a nice day