悬停时颜色和背景颜色不变答案

【问题标题】：Color and background color not changing while hovered悬停时颜色和背景颜色不变
【发布时间】：2021-07-21 19:09:49
【问题描述】：

我有一个带有图像、标题和段落的 div 块。当我将鼠标悬停在该 div 上时，我想更改该 div 的背景颜色和文本颜色，但只有背景颜色发生变化，颜色标签被简单地忽略。我该如何解决这个问题？

.Div_Systemingenieur {
  width: 18%;
  padding: 20px;
  border: 1px;
  border-color: white;
  border-radius: 25px;
  float: left;
  margin-left: 70px;
  margin-top: 70px;
  background-color: white;
  transition: 0.5s;
  background-color: white;
  color: #24252a;
 }

.Systemingenieur_Text {
 text-align: center;
 border: 1px;
 border-color: white;
 border-style: solid;
 border-radius: 25px;
 padding-bottom: 10%;
 color: #24252a;
}

.Heading_Systemingenieur {
 margin-bottom: 20px;
 margin-left: 15px;
 margin-top: 10px;
}
 .Div_Systemingenieur:hover {
   background-color: #24252a;
   color: white;
}

注意：我对 css 编程还是很陌生，我正在为一个学校项目做这件事。 PS：有些名字是用德语写的，因为它是我的母语。好好休息一天！吕西安

【问题讨论】：

它不会被“忽略”，但.Systemingenieur_Text 仍然有自己的颜色集，并且您没有更改那个。如果由于某种原因您不需要显式指定该元素的颜色 - 那么只需从该元素中删除颜色，以便它可以直接从父元素继承它。如果您需要为此元素显式指定它，然后使用descendant combinator，在其父元素悬停时格式化此元素 - .Div_Systemingenieur:hover .Systemingenieur_Text { … }
做到了！非常感谢！

标签： css hover

【解决方案1】：

.Div_Systemingenieur {
  width: 18%;
  padding: 20px;
  border: 1px;
  border-color: white;
  border-radius: 25px;
  float: left;
  margin-left: 70px;
  margin-top: 70px;
  background-color: white;
  transition: 0.5s;
  background-color: white;
  color: #24252a;
 }

.Systemingenieur_Text {
 text-align: center;
 border: 1px;
 border-color: white;
 border-style: solid;
 border-radius: 25px;
 padding-bottom: 10%;
}

.Heading_Systemingenieur {
 margin-bottom: 20px;
 margin-left: 15px;
 margin-top: 10px;
}
 .Div_Systemingenieur:hover {
   background-color: #24252a;
   color: white;
}

【讨论】：