更新时间:2023-01-02 09:23:27
我认为您的问题是由其他不继承自定义光标的元素引起的,或者它们的光标被其他CSS覆盖了.
I think your problem is caused by other elements who do not inherit the custom cursor or their cursor is overridden by other CSS.
请考虑以下基本示例:
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>
当您移动鼠标时,它将在自定义光标和默认光标之间切换,因为该光标仅应用于 div
s,并且当您将鼠标移至其他元素时,它可能会闪烁".
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".
在这种情况下,***将所有内容包装在通用容器中或将自定义光标应用于 body
/ html
标记:
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.