Question

HTML：

div#cursorCustom {
  background: white;
  border-style: solid;
  border-width: 0.5px;
  border-color: rgba(154,145,145,1.00);
  border-radius: 50px;
}
img.button1 {
  width: 25px;
  height: 25px;
}
img.button2 {
  width: 25px;
  height: 25px;
}
#button:active{
  cursor: url(Cursor1.png);
}
#button2:active{
  cursor: url(Cursor2.png);
}

<body>
  <div id="cursorCustom">
    <a href=# id="button"><img src="Cursor1.png" class="Button1"></a>
    <a href=# id="button2"><img src="Cursor2.png" class="Button2"></a>
  </div>	
</body>

单击“按钮”时，它不会将光标更改为我想要的图像。我是否必须将光标应用于HTML或正文选择器才能应用于整个页面？

Answer 1

是。并且为了使它也起作用，当按钮未激活时，您应该切换身体中的属性。

html[use-my-cursor="1"] {
  cursor: url(Cursor1.png);
}

并使用以下JS更改它：

document.documentElement.setAttribute("use-my-cursor", "1");

工作示例：

function setCursor(nr){
  document.documentElement.setAttribute("use-my-cursor", nr);
}

html[use-my-cursor="1"] {
  cursor: pointer;
}
html[use-my-cursor="2"] {
  cursor: crosshair;
}

<button onclick="setCursor(1)">Pointer</button>
<button onclick="setCursor(2)">Crosshair</button>

请注意，光标样式当然可以被覆盖（例如按钮可以覆盖）。

光标更改按钮不会更改

1 个答案: