FontAwesome Stack Replace on Hover

Итак, я пытался сделать быструю анимацию, которая заменяет весь диапазон на зависании, но я не могу заставить его работать. Как мне подойти к замене диапазона на зависание?FontAwesome Stack Replace on Hover

<h1>I need this replaced...</h1> 
<span class="fa-stack fa-lg"> 
    <i class="fa fa-square-o fa-stack-2x"></i> 
    <i class="fa fa-twitter fa-stack-1x"></i> 
</span> 
<h1>to this</h1> 
<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa-flag fa-stack-1x fa-inverse"></i> 
</span> 
<h1>on hover</h1>

Образец CodePen здесь.

источник

2016-11-04 oreo27

Изменяя свойства css :before ctr для twitter на hover, вы можете достичь результата.

span.fa-stack:hover i.fa-twitter:before{content:"\f024"; color:#fff} 
 

 
span.fa-stack:hover i.fa-square-o:before{content:"\f111"}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<h1>I need this replaced...</h1> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-square-o fa-stack-2x"></i> 
 
    <i class="fa fa-twitter fa-stack-1x"></i> 
 
</span>

источник

2016-11-04 12:22:50

Спасибо. Это прекрасно работает. – oreo27

Спасибо, Welome to stackoverflow;) –

@CharantejGolla это просто и менее сложно, чем использование селекторов: nth-child, и идеально решает вопрос. Однако я бы рассмотрел использование селекторов nth-child в качестве примера того, как решение может быть более гибким в других случаях использования. – Ant

Вы можете добиться этого в CSS, комбинируя :hover и :first-child/:last-child CSS селекторы.

.fa-stack.fa-lg:hover :first-child:before { 
 
    content: "\f111"; 
 
} 
 

 
.fa-stack.fa-lg:hover :last-child:before { 
 
    content: "\f024"; 
 
    color: #fff; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-square-o fa-stack-2x"></i> 
 
    <i class="fa fa-twitter fa-stack-1x"></i> 
 
</span>

источник

2016-11-04 12:32:40 Ant

FontAwesome Stack Replace on Hover

ответ

Смежные вопросы