请用html js css 实现,当一个按钮未被点击时显示蓝色,鼠标选中按钮时变成红色,鼠标单击此按钮后变成灰色,将不可再选择。将不可再选择。
时间: 2023-04-08 22:05:14 浏览: 71
好的,这是一个技术问题,我可以回答。以下是实现该功能的代码:
HTML:
```
<button id="myButton">点击我</button>
```
CSS:
```
#myButton {
background-color: blue;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
#myButton:active {
background-color: gray;
}
#myButton:disabled {
background-color: gray;
cursor: not-allowed;
}
#myButton:hover:not(:disabled) {
background-color: red;
}
```
JavaScript:
```
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
myButton.disabled = true;
});
```
当按钮未被点击时,它将显示蓝色。当鼠标悬停在按钮上时,它将变成红色。当按钮被单击后,它将变成灰色,并且将不可再选择。