0

Посмотрел похожие вопросы - не нашел своего варианта, в поиске по стеку тоже нет. Итого: Есть вот такой код:

<div class="right-container__contacts-row">
                    <a href="" class="contacts-row__telegram">
                        <span class="telegram__icon"></span>
                    </a>
                    <a href="" class="contacts-row__instagram">
                        <span class="instagram__icon"></span>
                    </a>
                    <a href="" class="contacts-row__phone">
                        <span class="phone__icon"></span>
                    </a>
                </div>

Для дочерних элементов элементов ".right-container__contacts-row" то есть ссылок, я применяю следующий css:

.contacts-row__telegram, .contacts-row__instagram, .contacts-row__phone:hover {
	transition: opacity 0.5s ease-in-out;
	opacity: 0.4;
}

В консоли да и на самом сайте - я вижу что эффект hover применился к первым двум элементам самостоятельно, в других браузерах не проверял, за вариант решения прописать отдельно для каждой ссылки знаю, интересует - почему я получил такую проблему, ведь по сути классы я перечислил через запятую, то есть наведение должно применятся для кого-то одного из них.. Скрин консоли и сайта прилагаю: скрин сайта и консоли Вот ссылка на сам сайт с проблемой:http://ds03.webazex.com/

1 ответ 1

1

если я правильно понял твою задачу, а именно чтобы они затухали при ховере, то ты через запятую присвоил telegram и instagram прозрачность, а последнему phone эти правила задал по ховеру...

.contacts-row__telegram:hover, 
.contacts-row__instagram:hover, 
.contacts-row__phone:hover {
  transition: opacity 0.5s ease-in-out;
  opacity: 0.4;
}
2
  • Я знаю за это решение, просто думал что по логике можно перечислить классы, которым дать hover в самом конце. Логично как бы, нет?
    – Антон
    20 дек 2019 в 12:43
  • 1
    если бы пользовался препроцессором то да, а так нет 20 дек 2019 в 12:45

Ваш ответ

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

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