1

Подскажите как реализовать, чтобы при наведении курсора на 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>

3
  • Перекрасить в прозрачный? Commented 21 февр. 2019 в 15:58
  • Посмотрите мой код, пожалуйста, у меня не срабатывает hover. Не могу понять по какой причине
    – yavis
    Commented 21 февр. 2019 в 16:13
  • У вас ошибка в селекторе, вам нужно написать i:hover + .facebook
    – E_K
    Commented 21 февр. 2019 в 16:14

1 ответ 1

1

.soc {
  position: absolute;
  padding-top: 26%;
  right: 5%;
}

.soc i {
  color: #000;
}

.facebook {
  position: absolute;
  text-decoration: none;
  font-size: 20px;
  color: #78D77C;
  padding-right: 300px;
  padding-top: 26%;
}

.soc i:hover + .facebook {
  /*display: none;*/
  color: red;
}
<div class="soc">
  <i id="fac" class="fab fa-facebook fa-3x">AAAAA</i>
  <div class="facebook">
    facebook
  </div>
</div>

1
  • Cпасибо большое
    – yavis
    Commented 21 февр. 2019 в 16:36

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.