有没有什么方法可以在点击按钮后返回到原始状态

Question

我想在点击按钮后将背景恢复到原始颜色(蓝色(，但点击按钮后，背景保持在焦点颜色(绿色(。对我的处境有什么解决办法吗？我测试过一些方法，比如动画，但是失败了。这是我的代码：

<button>button</button>

<style>
button {
padding: 10px 35px;
background-color: blue;
color: #fff;
}
button:focus {
background-color: green;
}
</style>

Answer 1

只需将:focus替换为:active。

button {
padding: 10px 35px;
background-color: blue;
color: #fff;
}
button:active {
background-color: green;
}

<button>button</button>

Answer 2

const btn = document.querySelector("button")
btn.setAttribute("class", "")
btn.addEventListener("mouseenter", () => {
btn.classList.add("green")
})
btn.addEventListener("mouseleave", () => {
btn.classList.remove("green")
})
btn.addEventListener("click", () => {
btn.classList.remove("green")
})

button {
padding: 10px 35px;
background-color: blue;
color: #fff;
}
button.green {
background-color: green;
}

<button>button</button>

Answer 3

您应该替换"按钮：焦点；用"；按钮：悬停；。这样，按钮的颜色在悬停时会发生变化(单击按钮时会这样做(。当鼠标离开元素时，按钮将恢复其原始颜色。看看下面的代码：

<button>Add to cart</button>

<style>
button {
padding: 10px 35px;
background-color: blue;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: green;
}
</style>