CSS更改每个游标

Question

我有一个网站，我正在构建，我希望有一个自定义游标为每个属性指定，如手，等待，指针，默认，移动等.我正在建立一个操作系统网站，所以我想有自定义游标。这是CSS代码。

* {
        cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
        cursor:url("../.drive/system/visual/cursors/hand.cur"),hand;
        cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
        cursor:url("../.drive/system/visual/cursors/move.cur"),move;
        cursor:url("../.drive/system/visual/cursors/move.cur"),all-scroll;
        cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),col-resize;
        cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),e-resize;
        cursor:url("../.drive/system/visual/cursors/horizontal-resize.cur"),w-resize;
        cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),row-resize;
        cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),n-resize;
        cursor:url("../.drive/system/visual/cursors/vertical-resize.cur"),s-resize;
        cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),se-resize;
        cursor:url("../.drive/system/visual/cursors/diagonal-resize-1.cur"),nw-resize;
        cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),sw-resize;
        cursor:url("../.drive/system/visual/cursors/diagonal-resize-2.cur"),ne-resize;
        cursor:url("../.drive/system/visual/cursors/move.cur"),grab;
        cursor:url("../.drive/system/visual/cursors/move.cur"),grabbing;
        cursor:url("../.drive/system/visual/cursors/unavailable.cur"),no-drop;
        cursor:url("../.drive/system/visual/cursors/unavailable.cur"),not-allowed;
        cursor:url("../.drive/system/visual/cursors/text.cur"),vertical-text;
        cursor:url("../.drive/system/visual/cursors/text.png"),text;
        cursor:url("../.drive/system/visual/cursors/wait.cur"),wait;
        cursor:url("../.drive/system/visual/cursors/help.cur"),help;
        cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}

唯一碰巧加载的游标是底部的游标(十字线)。

我也指定了一些PNG游标，它们没有改变结果。

我尝试将其放入html、body{}和div{}中，但同样没有效果。

我想要像Windows93那样的东西，但不需要JavaScript

如果没有CSS专用的方法，那么我可以接受JavaScript方法。但请你只吃香草酒。

谢谢!

Answer 1

cursor值正在相互覆盖。这意味着最后一个值是唯一起作用的值，因为它是覆盖游标值的最后一个值。

URL后面的单词是fallback关键字。这意味着，如果无法找到或呈现图像，则将绘制关键字指定的游标。

例如，使用属性cursor: url("../.drive/system/visual/cursors/precision-select.cur"), crosshair;，浏览器将尝试绘制URL中指定的游标，但如果不能，浏览器将使用默认的crosshair游标。

要让浏览器显示不同的游标，您需要为每个元素指定游标。对于您的默认游标，您将拥有：

* {
    cursor:url("../.drive/system/visual/cursors/pointer.cur"),default;
}

要在链接上获得指针，您可以这样做：

a {
    cursor:url("../.drive/system/visual/cursors/pointer.png"),pointer;
}

对于特定元素的十字线，您可以尝试：

.target-element {
    cursor:url("../.drive/system/visual/cursors/precision-select.cur"),crosshair;
}

您需要为希望更改/自定义游标的每个元素指定游标属性。对默认游标使用通用选择器可以确保只为需要它的元素指定属性。