将鼠标悬停在按钮上时文本的颜色不会改变

Question

我是 CSS 的新手，我正在尝试实现一个按钮，将鼠标悬停在该按钮上时，其文本和背景颜色会发生变化。虽然背景颜色的更改有效，但文本并非如此。你能告诉我我做错了什么吗？提前致谢！

HTML

button {
  background: none;
  border-radius: 5px;
  border: 1.5px solid #4ca37f;
  color: #4ca37f;
  padding: 1px 6px;
  cursor: pointer;
}

.button:hover {
  background-color: #1595eb;
  color: rgb(255, 255, 255);
}

<div class="button">
  <button type="button">Follow</button>
</div>

Answer 1

将样式应用于按钮标记 button:hover 而不是 .button:hover

button {
  background: none;
  border-radius: 5px;
  border: 1.5px solid #4ca37f;
  color: #4ca37f;
  padding: 1px 6px;
  cursor: pointer;
}

button:hover {
  background-color: #1595eb;
  color: rgb(255, 255, 255);
}

<div class="button">
  <button type="button">Follow</button>
</div>

Answer 2

您的第二个 CSS 规则 .button:hover 主要针对 .button class。如果我没有理解错的话，当您将鼠标悬停在 div 上时，您希望更改实际按钮的 background-color 和 color。这意味着你必须针对 .button 内的 button，例如：

.button:hover button {
  background-color: #1595eb;
  color: rgb(255, 255, 255);
}

将鼠标悬停在按钮上时文本的颜色不会改变

Color of the text not changing when hovering over a button

html

css

button