单击时javascript切换不起作用，但将鼠标悬停在按钮上时css起作用

Question

我想要一个按钮在单击时显示一些文本。 当我将鼠标悬停在按钮上时，该按钮正在改变颜色，但单击此处时它不显示文本，这是 css 和 javascript。

CSS：

button {
  background-color: #f2c33c;
  font-size: 20px;
  color: #000000;
  padding: 10px;
  border-radius: 10px;
  border: 3px solid #808080
}

button:hover {
  background-color: #7cc272;
  color: #333333;
}
.hidden {
  display: none;
}
.showing {
  display: block;
  font-family: Arial, sans-serif;
  background-color: #509fcb;
  color: #000000;
  width: 400px;
  padding: 20px;
  margin-top: 20px;
  border-radius: 20px;
}

js：

document.querySelector(".clickme").addEventListener("click", () => {
  document.querySelectorAll(".hidden").forEach((item) => {
    item.classList.toggle(".showing");
  });
});

Answer 1

您不需要指定. 在你的课上。

所以你的代码看起来像这样：

document.querySelector(".clickme").addEventListener("click", () => {
  document.querySelectorAll(".hidden").forEach((item) => {
    item.classList.toggle("showing");
  });
});