Question

我想更改网站的所有鼠标光标。我试图做；

body {
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Arrow.cur"), default;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/AppStarting.ani"), progress;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Help.cur"), help;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Wait.ani"), wait;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Cross.cur"), crosshair;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Hand.ani"), pointer;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/IBeam.cur"), text;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeAll.cur"), move;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/NO.ani"), not-allowed;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeAll.cur"), all-scroll;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeNS.cur"), row-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeWE.cur"), col-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeWE.cur"), ew-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeNS.cur"), ns-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeNESW.cur"), nesw-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeNWSE.cur"), nwse-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/NO.ani"), no-drop;
}

但是没有用。

有什么帮助吗？

Answer 1

您只能定义一个游标属性（就像任何属性一样），因此只能有一个游标。 ,用于后备值，而不是用来定义所使用图像的目的。

写这个：

cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/NO.ani"), no-drop

并非意味着no-drop光标将使用您指定的图像。这意味着，如果URL不存在或不是有效的游标文件，则使用no-drop游标。该属性是最后一个属性，因此它会覆盖之前的所有属性。

cursor属性被指定为零个或多个<url>值，以逗号分隔，后跟一个必需的关键字值。每个<url>应该指向一个图像文件。浏览器将尝试加载指定的第一张图像，如果无法加载则退回到下一张图像，如果无法加载（或未指定任何图像）则退回到关键字值。 ^ref

使用CSS无法完成您想做的事情，因为默认光标是浏览器设置和操作系统的一部分。最好情况下，您可以为自己的浏览器更改它们，但不能为其他浏览器更改它们。您可以简单地基于元素，事件等定义自定义光标

Answer 2

正如Temani Afif的答案所述，您无法使用CSS更改浏览器的默认光标，但是您可以将cursor CSS规则应用于您希望用于网站的任何元素：

body {
  cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Arrow.cur"), default;
  min-height: 100vh;
}
.progress {
  cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/AppStarting.ani"), progress;
}
.help {
  cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Help.cur"), help;
}
.wait {
  cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Wait.ani"), wait;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    Website body. Hover your mouse over this part.
    <button type="button" class="progress">
      Progress
    </button>
    <button type="button" class="help">
      Help
    </button>
    <button type="button" class="wait">
      Wait
    </button>
  </body>
</html>

Answer 3

除非已设置，否则身体的高度为0

body {
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Arrow.cur"), default;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/AppStarting.ani"), progress;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Help.cur"), help;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Wait.ani"), wait;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Cross.cur"), crosshair;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/Hand.ani"), pointer;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/IBeam.cur"), text;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeAll.cur"), move;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/NO.ani"), not-allowed;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeAll.cur"), all-scroll;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeNS.cur"), row-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeWE.cur"), col-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeWE.cur"), ew-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeNS.cur"), ns-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeNESW.cur"), nesw-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/SizeNWSE.cur"), nwse-resize;
cursor: url("http://rsc-wiki.wikidot.com/local--files/temalar:rsc/NO.ani"), no-drop;
}
html,body{
  height: 100%;
}

如何使用CSS更改网站的光标？

3 个答案: