CSS 改变每个光标

Question

我有一个正在 build 的网站，我想为每个属性指定一个自定义光标，例如手、等待、指针、默认、移动等等...我正在建立一个操作系统网站，所以我想要自定义光标。这是 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 方法。但请只使用 vanilla-js。

谢谢!

Answer 1

游标 值相互覆盖。这意味着最后一个值是唯一有效的值，因为它是最后一个覆盖游标值的值。

URL 后面的词是后备关键字。这意味着如果无法找到或渲染图像，将绘制关键字指定的光标。

例如，使用属性 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;
}

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