Chrome 中的自定义 link 光标有问题

Question

我想在悬停链接时使用自定义光标。它在 Safari 和 Firefox 上运行良好，但在 Chrome 上它跳回默认光标一毫秒，然后转到我的自定义光标。

代码笔：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

你试过transition-duration还是transition-delay？这用于定义指定转换的持续时间。这是目标元素在两个定义的状态之间转换所需的时间长度。

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

另请注意，某些功能仅受特定版本的浏览器支持。

Answer 2

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

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

Chrome 中的自定义 link 光标有问题

Problem with custom link cursor in Chrome

css

hover

mouse-cursor