css - 按钮中的悬停效果不适用于反应中的 CSS 模块

Question

我在一个按钮上有 2 种不同的悬停效果。有.Red班级的人工作得很好，但普通.Button班级却不行。

.Button {
  background-color: green;
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
};
//this one doesn't work
.Button:hover {
  background-color: lightgreen;
  color: black;
}

.Button.Red {
  background-color: red;
}

.Button.Red:hover {
  background-color: salmon;
  color: black;
}

<button class="Button">Click Me</button>

<button class="Button Red">Click Me</button>

标签： css

Answer 1

你有一个 ”;” 在“}”之后删除它，它应该可以工作。

.Button {
  background-color: green;
  color: white;
  font: inherit;
  border: 1px solid blue;
  padding: 8px;
  cursor: pointer;
};