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

Question

当我将鼠标移到<a>链接上时，文字颜色会发生变化，但当我将鼠标放在包含它的<div>上时，文字颜色不会改变。

当鼠标放在包含div上时，我想更改锚文本的颜色。

.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 h4 a:hover{
	color: #fff;
}

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

Answer 1

您需要更改div本身悬停时的颜色，即代替

.more_games h4 a:hover{
    color: #fff;
}

...只会在<a>元素悬停时改变它的颜色，使用：

.more_games:hover h4 a{
    color: #fff;
}

...当 div 悬停时会改变<a>的颜色。

你可以看到它在这里工作：

＆＃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 2

您需要添加：

.more_games:hover h4 a { color: #fff; }

Answer 3

替换以下代码

.more_games h4 a:hover{
    color: #fff;
}

带

.more_games:hover h4 a{
    color: #fff;
}