CSS hover 2 иконки - PullRequest
Новая
       43

CSS hover 2 иконки

0 голосов
/ 01 октября 2018

Для создания иконки социальной сети я использую потрясающие иконки: 

.fa-circle {
color: #f1f1f1;
}

.fab-facebook-f {
color: blue;
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>

как мне одновременно изменить значок круга и значок facebook при наведении курсора?

Ответы [ 3 ]

0 голосов
/ 01 октября 2018 

.fa-circle {
color: #f1f1f1;
}
.fab-facebook-f {
color: blue;
}
.author-box-social-icon:hover .fa-circle {
  color: #64908A;
}
.author-box-social-icon:hover .fa-facebook-f {
  color: #f00;  
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>
0 голосов
/ 01 октября 2018

Попробуйте следующий код, также используя переход. 

.fa-circle {
  color: #f1f1f1;
}
.fab-facebook-f {
  color: blue;
}
.author-box-social-icon i {
  transition: .3s ease-in-out;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -ms-transition: .2s ease-in-out;  
}
.author-box-social-icon:hover .fa-circle {
  color: blue;
}
.author-box-social-icon:hover .fa-facebook-f {
  color: #f1f1f1;
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>
0 голосов
/ 01 октября 2018

, если вы хотите изменить цвет при наведении курсора на иконку.добавьте этот код. 

.fa-circle {
color: #f1f1f1;
}

.fab-facebook-f {
color: blue;
}


.author-box-social-icon:hover .fa-circle{color:#444;}
  .author-box-social-icon:hover .fa-facebook-f{color:#fff;}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

<a class="author-box-social-icon" href="" target="_blank">
  <span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fab fa-facebook-f fa-stack-1x"></i>
  </span>
</a>
...