2

Добрый вечер! Предо мной стоит задача сделать так чтобы при наведении на один из шрифтовых иконок она становилась полностью непрозрачной, остальные же оставались полупрозрачными как это и работает сейчас при наведении на 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>

2 ответа 2

2

Блок кода

.icons:hover {
  opacity: 0.4;
  transition: 0.35s;
}

Добавляет полупрозрачность всему блоку, а не иконкам

Его нужно переписать так

.icons:hover .fa {
  opacity: 0.4;
  transition: 0.35s;
}
1

Добавьте следующий код:

.fa {
 opacity: 0.4;
}

Это установка начального opacity для иконок.

2
  • мне нужно чтобы при наведении на этот div они становились полупрозрачными, и при наведении на одну из иконок она становилась непрозрачной
    – user234223
    Commented 14 мая 2017 в 15:01
  • @user234223 тогда просто добавьте вышестоящий код.
    – wcobalt
    Commented 14 мая 2017 в 15:23

Ваш ответ

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

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