将鼠标放在div上时，更改锚文本的颜色

Question

我正在研究我的大学项目，我遇到了CSS的问题所以我搜索了我的问题并获得了answer。这段代码解决了我的问题。我的问题是，有没有其他方法来获得相同的输出？我的意思是有很多方法可以使用CSS来获得相同的结果。我不想使用jQuery / JavaScript。如果是，请告诉我。

＆＃13;

＆＃13;

.more_games{
  background-color: #F1F1F1;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 5px;
  margin-bottom: -14px;
 }
.more_games h4{
  text-align: center;
  line-height: 29px;
  font-family: "Times New Roman", Georgia, Serif;
  color: red;
}
.more_games:hover{
  background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
  border-radius: 5px;
}
.more_games:hover h4 a{
	color: #fff;
}

＆＃13;

<div class="more_games">
  <h4><a href="#">More Games</a></h4>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使锚点和标题继承其父级颜色。

＆＃13;

＆＃13;

.more_games a {
  color: inherit;
}
.more_games{
  color: red;
  background-color: #F1F1F1;
  margin-left: 12px;
  margin-right: 12px;
  border-radius: 5px;
  margin-bottom: -14px;
 }
.more_games h4{
  text-align: center;
  line-height: 29px;
  font-family: "Times New Roman", Georgia, Serif;
}
.more_games:hover{
  color: #fff;
  background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
  border-radius: 5px;
}

＆＃13;

<div class="more_games">
		<h4><a href="#">More Games</a></h4>
</div>

＆＃13;

＆＃13;

＆＃13;