Добрый вечер! Предо мной стоит задача сделать так чтобы при наведении на один из шрифтовых иконок она становилась полностью непрозрачной, остальные же оставались полупрозрачными как это и работает сейчас при наведении на div.icons, прикрепляю разметку CSS и HTML
В моём случае при наведении на иконку она так и остается полупрозрачной, способы прикрепил
CSS:
.fa-vk {
display: inline-block;
position: relative;
color: #404040;
transition: 0.35s;
font-size: 2.375em;
transition: 0.35s;
margin-top: 40%;
margin-left: 30%;
}
.fa-vk:hover {
color: #249cce;
transition: 0.35s;
background: #fff;
}
.fa-facebook {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
margin-top: 40%;
margin-left: 30%;
}
.fa-facebook:hover {
color: #249cce;
transition: 0.35s;
}
.fa-twitter {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
margin-top: 40%;
margin-left: 30%;
}
.fa-twitter:hover {
color: #249cce;
transition: 0.35s;
}
.fa-github {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
margin-top: 40%;
margin-left: 30%;
}
.fa-github:hover {
color: #249cce;
transition: 0.35s;
}
.fa-envelope {
display: inline-block;
position: relative;
color: #404040;
font-size: 2.375em;
transition: 0.35s;
margin-top: 40%;
margin-left: 30%;
}
.fa-envelope:hover {
color: #249cce;
transition: 0.35s;
}
.icons:hover {
opacity: 0.4;
transition: 0.35s;
}
.icons>i>.fa:hover {
opacity: 1;
}
i:hover {
opacity: 1;
}
.fa:hover {
opacity: 1;
}
HTML:
<div class="icons">
<div class="col-xs-2 col-md-1 col-md-offset-3">
<a href="#"><i class="fa fa-vk fa-2x" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2 col-md-1">
<a href="#"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2 col-md-1">
<a href="#"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2 col-md-1">
<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2 col-md-1">
<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
</div>
</div>