Chrome中的自定义链接光标出现问题

Question

我想在悬停时使用自定义光标进行链接。它可以在Safari和Firefox上正常工作，但是在Chrome上，它会跳回到默认光标一毫秒，然后再转到我的自定义光标。

Codepen：https://codepen.io/ford1234/pen/vwzRgJ

我已经在Codepen中重新创建了该问题，但该问题也发生在我将其应用到的网站上。

<div>
  <a href="#"><p>Hello</p></a>
</div>

<style>
html {
    cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}

a:hover {
    cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;

}     

预期结果：从圆形到三角形的过渡。 实际结果：从圆形过渡到默认的手形指针，再过渡到三角形。

Answer 1

删除选择器上的“：hover”。 您的选择器必须是

  

a {       光标：url（'http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'），   汽车; }

Answer 2

您是否尝试了转换持续时间或转换延迟？这用于定义指定过渡的持续时间。这是目标元素在两个定义的状态之间转换所需的时间。

.example {
    transition-duration: 0s;
    // or
    transition-delay: -1s;
}

还请记住，某些功能仅受某些版本的浏览器支持。