将鼠标置于包含的div元素上时更改锚文本的颜色 [英] Change color of anchor text when mouse is placed over the containing div element

问题描述

当我将鼠标移到< a> 链接上时，文本颜色发生变化，但是当我将其放置在包含它的< div> 上时，文本颜色没有变化.

The text color is changing when I move the mouse over the <a> link but not changing when I place it over the <div> that contains it.

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

I want to change the color of the anchor text when mouse is placed over the containing div too.

.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>

推荐答案

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

You need to change the colour on the hover of the div itself, i.e. instead of

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

...仅在将< a> 元素本身悬停时才会更改其颜色，请使用:

...which will only change the colour of the<a> element when it itself is hovered, use:

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

...，当悬停 div 时，它将更改< a> 的颜色.

... which will change the colour of <a> when the div is hovered.

您可以在这里看到它的工作状态:

You can see it working here:

.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;
}

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

这篇关于将鼠标置于包含的div元素上时更改锚文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！