0

Мне нужно чтобы при наведении на одну из иконок, остальные становились полу прозрачными, как можно реализовать это используя только CSS и HTML?

Прикрепляю разметку HTML:

    <div class="col-xs-12 col-md-12 col-md-offset-2">
            <p class="main2">Контактная информация</p>
    </div>
        <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>

и CSS:

.main2 {
    font-family: 'Raleway', sans-serif;
    font-size: 3.000em;
    color: #404040;
    letter-spacing: -1px;
    display: inline-block;
    position: relative;
    margin-top: 7%;
    left: 4%;
}

.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;
}

введите сюда описание изображения

ЗЫ: Пытался реализовать таким способом:

<style type="text/css">

    .fa-envelope:hover .fa-github { opacity: 0; }

</style>

Ничего из этого не вышло

4
  • Вопрос повторяет данный: ru.stackoverflow.com/questions/309063/…
    – wcobalt
    13 мая 2017 в 18:26
  • @wcobalt То есть без применения JS сделать это невозможно?
    – user234223
    13 мая 2017 в 18:34
  • 1
    Можно и с помощью CSS, но есть ограничения: ru.stackoverflow.com/a/338211/242240
    – wcobalt
    13 мая 2017 в 18:36
  • @wcobalt Благодарю за наводку. Не знал.
    – user210322
    13 мая 2017 в 18:41

1 ответ 1

3

Прозрачность можно задать не только с помощью opacity, но и с помощью rgba().

* {
  padding: 0;
  margin: 0;
}

body {
  font: bold normal 200%/2 sans-serif;
}

ul {
  background-color: #fa5;
  display: flex;
}

li {
  text-align: center;
  flex: 1;
  list-style: none;
}

ul:hover {
  color: rgba(0, 0, 0, .2);
}

ul>li:hover {
  color: black;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Ваш ответ

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

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