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

【问题标题】：How to make custom cursor image not disappear如何使自定义光标图像不消失
【发布时间】：2021-08-19 18:47:19
【问题描述】：

div {
    cursor:url(smiley.gif),url(myBall.cur),auto;
}

似乎每当您在光标属性中指定自定义图像时，图像只会出现片刻，然后恢复为默认值。

您可以在此处观看此行为：http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=url(smiley.gif),url(myBall.cur),auto

我在 Chrome 和 Firefox 中得到相同的结果。有没有办法让图像保持不变？

【问题讨论】：

您提供的链接对我来说很好用（笑脸）。我正在使用基于 Chrome 的 Vivaldi。如果我在 Edge 中测试，我不会得到笑脸 gif，而是球状光标，但它仍然存在。
此处无闪烁（最新 Chrome）
Chrome for macOS 上无闪烁
无闪烁 Safari Mac
也许尝试不使用第二个 (.cur) 一个？ jsfiddle.net/azizn/3mhefu54

标签： css

【解决方案1】：

我认为您的问题是由不继承自定义光标的其他元素引起的，或者他们的光标被其他 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>

当您移动鼠标时，它会在自定义光标和默认光标之间交替，因为光标仅应用于divs，而当您将鼠标移动到其他元素时，它可能会“闪烁”。

在这种情况下，最好将所有内容包装在一个通用容器中或将自定义光标应用于body/html 标签：

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>

但同样，您必须确保它不会被任何其他规则覆盖。

【讨论】：

有趣。您知道将cursor 应用于嵌套元素时的预期行为吗？内部节点不从外部继承属性吗？喜欢color？
默认情况下，内部节点应该继承父级的光标。除非另一条规则 CSS 为某些元素操作光标（检查整个 CSS 文件中的 cursor 属性）。或者，JavaScript 代码可能会覆盖游标属性。您还可以将cursor: inherit 应用于子元素。

【解决方案2】：

这是一个更好的主意，因为您可以将您喜欢的元素更改为内部的光标。

[your-element] {
    cursor: url("http://placehold.it/50x50"), auto!important;
}

添加 !important 解决了自定义样式覆盖代码的问题。

【讨论】：