Question

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中获得相同的结果。有没有办法让图像保留下来？

Answer 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>

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

在这种情况下，最好将所有内容包装在一般容器中，或将自定义光标应用于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>

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

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

1 个答案: