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
    14 мая 2017 в 15:01
  • @user234223 тогда просто добавьте вышестоящий код.
    – wcobalt
    14 мая 2017 в 15:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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