Custom cursor disappears when hovering into the screen - html

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