css - 如何在 css 中自定义滚动条悬停的光标？

Question

我正在使用 tumblr。我使用以下代码更改 的光标主体和 悬停在链接上 :

body, a { cursor:url("http://i.imgur.com/2qleX.jpg"), auto}
a:hover { cursor:url("http://i.imgur.com/IepP2.jpg"), auto}

但它似乎并不影响 滚动条我已添加到其中一个容器中，即:

overflow-y: auto;
overflow-x: hidden;

当我悬停/单击滚动条时，光标只是变回默认浏览器光标。如何自定义滚动条的光标？？？

Answer 1

此代码将自定义滚动条
在这里，当我们将鼠标悬停在滚动条上时，我将添加一个光标图像
此示例仅适用于 Chrome、Safari 和 Opera 等 webkit 浏览器，但不适用于 Firefox 或 Edge/IE。
这是一种非标准的方式。

body::-webkit-scrollbar-thumb {
  cursor:url("http://i.imgur.com/2qleX.jpg"), auto;
}
p {
  /* force scrollbar */
  height: 200vh;
}

<p></p>

你也可以完全自定义滚动条，
用这个

body::-webkit-scrollbar {
    /*it will edit the scrollbar area*/
}

body::-webkit-scrollbar-track {
    /*it will edit the scrollbar path*/
}

body::-webkit-scrollbar-thumb {
  /*it will edit the scrollbar thumb which we use to scroll*/
}