使用 CSS 单击链接时保持自定义光标答案

【问题标题】：Keep custom cursor when clicking a link using CSS使用 CSS 单击链接时保持自定义光标
【发布时间】：2016-10-05 08:42:43
【问题描述】：

我使用此 css 代码将光标更改为自定义图像。

*
{
    cursor: url(../images/cursor.png), auto;
}

现在，每当我单击链接或按钮时，光标都会变为默认光标。如何预防？

【问题讨论】：

如果能让代码运行起来，调试起来就更容易了。
我从未使用过自定义光标，所以我不确定，但您是否也尝试将光标设置为 :active？
是的，虽然我很确定 * 适用于所有元素。如果我错了纠正我。无论如何，仍然行不通。
你试过我的建议了吗？

标签： css cursor

【解决方案1】：

您也需要对特定链接应用相同的 css。例如

a {
 cursor: url(http://placehold.it/50x30) , auto;
}

你的情况

a {
 cursor: url(../images/cursor.png), auto;
}

working jsfiddle

更多参考 -

Cursor

【讨论】：

谢谢，但这不是一个意思。当您单击链接时，光标会在半秒内变为正常的。

【解决方案2】：

你的意思是如果你点击一个链接会显示默认光标，按住它并移动一点？这无法更改，因为此交互会导致元素（在本例中为链接）被拖动，无法设置样式。

edit：是的，* 适用于所有元素，并且将始终覆盖浏览器默认值。所以这不是特异性问题。

【讨论】：

【解决方案3】：

CSS：

.custom-cursor:link {
        cursor: url(../images/cursor.png), auto;
    }

.custom-cursor:hover {
        cursor: url(../images/cursor.png), auto;
    }

.custom-cursor:active {
        cursor: url(../images/cursor.png), auto;
    }

HTML：

<a href="YourLinkHere" class="custom-cursor">link visible text here</a>.

将class="custom-cursor" 添加到您希望此行为的每个链接或按钮。

【讨论】：