如何在单击时更改按钮的光标样式

Question

我使用HTML创建了一个按钮，当我单击按钮时，我试图对底部设置样式，使其具有不同的光标样式。我该怎么做？

Answer 1

在css中，您可以为按钮应用光标样式。您也可以使用内联样式。小埃姆雷。

button {
cursor:crosshair;
}

<button>btn</button>

Answer 2

您可以使用游标css属性来实现这一点。查看Mozilla的文档，了解有关该属性的更深入的解释。

我刚刚又读了一遍你的问题，我看到你想在按下按钮并持续的时候改变光标。您可以使用：activepseudo-class来实现它。

button:active {
cursor: help;
}

<button href="#">test button</button>

Answer 3

当html已经解析(DOMContentLoaded事件)时，脚本开始工作。我们为点击这个特定的按钮添加了一个事件监听器，当它被点击时，我们分配一个类来设置样式，例如，用另一个光标设置禁用状态。

我用指针将光标添加到按钮的默认状态，因为默认情况下浏览器中的按钮没有默认的cursor: pointer;。

单击按钮后，"已单击"光标状态将在浏览器中应用并工作(您可以在Chrome或其他浏览器的开发工具中检查它)，但由于某种原因，它在下面代码段的结果部分看起来有问题，因此请在代码和浏览器中检查此方法。

祝好运

document.addEventListener('DOMContentLoaded', (event) => {
let buttonExample = document.querySelector(".button-example");

buttonExample.addEventListener('click', (event) => {

event.target.classList.add("button-example--disabled");
});

});

.container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.button-example{
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 1;
padding: 1em 2em;
text-transform: uppercase;
background-color: #fff;
border: 2px solid #000;
border-radius: 0.5em;
color: #000;
}
.button-example:hover{
cursor: pointer;
}
.button-example--disabled{
background-color: #fefefe;
border-color: grey;
color: grey;
cursor: not-allowed;
}

<div class="container">
<button type="button" class="button-example">Button text</button>
</div>

Answer 4

button {
cursor:pointer;
}

<button>Click</button>