css - 悬停在 div 上时更改链接颜色，当悬停链接时也会更改链接颜色

Question

抱歉，如果标题有点具体，但这将为我的网站画龙点睛。这是我当前的代码:

.social {
	background-color: rgba(150,150,150,0.75);
	height: 150px;
	width:200px;
	margin: 20px;
	display: inline-block;
    transition: background .25s ease, box-shadow 0.20s ease-in-out, color 0.20s ease;
    font-weight: bold;
    
}
.social:hover {
	
    background-color: rgb(118, 118, 118);
	box-shadow: 0px 0px 2px 3px rgba(125,125,125,0.75);
    color: rgb(255,255,255);
    
}

.social:hover a {
    color: rgb(255,255,255);
}
a {
    color: rgb(20, 0, 255);
    transition: color 0.5s;
}

a:hover {
    color: rgb(0, 255, 10);
    text-decoration: underline;
    
}

<div class="social"> <span>Blank</span>  <br> <span> Blank</span> <p> <a href="http://www.twitter.com"> Hello <i class="fa fa-twitter"></i></a> <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook-official"></i></a> <a href="http://www.plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a> <a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram"></i></a></p> </div>

当我将鼠标悬停在 div 上时，它会变灰，而文本会变白，这正是我想要的。但是，我想要这样，当您将鼠标悬停在链接上时，它会变成浅绿色。

提前致谢。

Answer 1

编辑了您的示例。

您需要在 <a> 上指定悬停以及将鼠标悬停在 div 上

.social {
	background-color: rgba(150,150,150,0.75);
	height: 150px;
	width:200px;
	margin: 20px;
	display: inline-block;
    transition: background .25s ease, box-shadow 0.20s ease-in-out, color 0.20s ease;
    font-weight: bold;
    
}
.social:hover {
	
    background-color: rgb(118, 118, 118);
	box-shadow: 0px 0px 2px 3px rgba(125,125,125,0.75);
    color: rgb(255,255,255);
    
}

.social:hover a {
    color: rgb(255,255,255);
}
.social:hover a:hover {
    color: rgb(0, 255, 10);
}
a {
    color: rgb(20, 0, 255);
    transition: color 0.5s;
}

<div class="social"> <span>Blank</span>  <br> <span> Blank</span> <p> <a href="http://www.twitter.com"> Hello <i class="fa fa-twitter"></i></a> <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook-official"></i></a> <a href="http://www.plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a> <a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram"></i></a></p> </div>