Подскажите как реализовать, чтобы при наведении курсора на fontawesome, текст пропадал, а когда курсор убираешь с иконки он обратно появлялся
.soc{
position: absolute;
padding-top:26%;
right: 5%;
}
.soc i{
color:#FFF;
}
.facebook{
position: absolute;
text-decoration: none;
font-size: 20px;
color:#78D77C;
padding-right:300px;
padding-top:26%;
}
.soc i:hover .soc .facebook{
display: none;
}
<div class="soc">
<i id="fac" class="fab fa-facebook fa-3x"></i>
<div class="facebook">
facebook
</div>
</div>
i:hover + .facebook