CSS：将鼠标悬停在 HTML 提交按钮上

Question

我正在尝试在 CSS 中设置 HTML 提交按钮的样式：

HTML:

 <input type="submit" value="Yes" id="popUpYes">

CSS：

 #popUpYes
{
  width: 60px;
  height: 30px;
  background-color: black;
}
#popUpYes:hover
{
  background-color: white;
}

基本样式有效，但背景在悬停时不会改变颜色。

原文由 Juicy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的原始代码对我有用。确保提交按钮没有继承任何其他冲突的样式。

原文由 userDEV 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试这个 JSfiddle

试试这个：

 #popUpYes {
  width: 60px;
  height: 30px;
  background-color: black;
  color: white;
  /* SET COLOR IN WHITE */
}

#popUpYes:hover {
  background-color: white;
  color: black;
  /* SET COLOR IN BLACK */
}

 <input type="submit" value="Yes" id="popUpYes">

您必须为文本分配 color 属性。

原文由 Black Sheep 发布，翻译遵循 CC BY-SA 4.0 许可协议