Chrome中自定义链接光标的问题答案

【问题标题】：Problem with custom link cursor in ChromeChrome中自定义链接光标的问题
【发布时间】：2019-05-29 11:14:24
【问题描述】：

我想在悬停时为链接使用自定义光标。它在 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;

}

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

【问题讨论】：

无法复制，但will-change: cursor; 可能会有所帮助。
@Paulie_D 不幸的是没有什么不同

标签： css hover mouse-cursor

【解决方案1】：

删除选择器上的 ":hover"。你的选择器必须是；

一个{ 光标：url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), 汽车; }

【讨论】：

【解决方案2】：

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

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

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

【讨论】：