使用CSS单击链接时保留自定义光标

Question

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

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

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

Answer 1

您也需要将相同的CSS应用于该特定链接。 e.g。

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

在你的情况下

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

working jsfiddle

更多参考 -

Cursor

Answer 2

你的意思是如果你点击一个链接，按住它然后移动一下就会显示默认光标？这不能改变，因为这种交互导致元素（在这种情况下是一个链接）被拖动，不能被设置为afaik。

编辑：是，*适用于所有元素，并始终覆盖浏览器默认值。所以它不是特异性问题。

Answer 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"添加到您希望此行为的每个链接或按钮。