且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何使自定义光标图像不消失

更新时间: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 divs 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.