I think your problem is caused by other elements who do not inherit the custom cursor or their cursor is overridden by other CSS.
Consider the following basic example:
div {
cursor: url("http://placehold.it/50x50"), auto;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, saepe.</p>
<p>Quis doloremque, reiciendis minima veniam natus id repudiandae vitae quod?</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, corporis.</p>
<p>Odit, suscipit atque quae nihil quos asperiores enim fugiat iusto.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, a!</p>
<p>Vel reprehenderit, blanditiis sunt numquam cum iste incidunt veniam sint.</p>
</div>
When you move the mouse around, it will alternate between the custom cursor and the default one, because the cursor is applied to div
s only and when you move mouse to other element, it might "flicker".
In this case, it's best to wrap everything inside a general container OR apply custom cursor to the body
/html
tag:
html {
cursor: url("http://placehold.it/50x50"), auto;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, saepe.</p>
<p>Quis doloremque, reiciendis minima veniam natus id repudiandae vitae quod?</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, corporis.</p>
<p>Odit, suscipit atque quae nihil quos asperiores enim fugiat iusto.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, a!</p>
<p>Vel reprehenderit, blanditiis sunt numquam cum iste incidunt veniam sint.</p>
</div>
But again, you have to make sure it does not get overridden by any other rules.
.cur
) one? jsfiddle.net/azizn/3mhefu54