当悬停在 div 上时更改 link 颜色，但当悬停在 link 上时也会更改 link 颜色

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 上时，它变灰，文本变白，这正是我想要的。但是，我想要这样，当您将鼠标悬停在 link 上时，它会变成浅绿色。

提前致谢。

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>

当悬停在 div 上时更改 link 颜色，但当悬停在 link 上时也会更改 link 颜色

Change link colour when hovered on a div, but also change link colour when the link is hovered over

css

hyperlink

hover