Задание 24. Эффекты при наведении: кнопки — часть 3


#1

Здравствуйте.

Для иконок всех трех кнопок селекторы пишутся в таком виде:

.btn-blue:hover .icon,
.btn-blue.hover .icon{

}

Для чего помимо селектора псевдокласса .btn-blue:hover .icon ещё добавляется селектор .btn-blue.hover .icon? Что такое этот .hover ? Один из вариантов написания псевдокласса? В каких-то браузерах псевдоклассы должны быть записаны именно так, чтобы воспринимались ими?


#2

Приветствую!

Класс .hover назначается в этих заданиях исключительно в утилитарных целях, чтобы проверять на сервере. Никакой другой логики в нём нет.


#3

Спасибо.


#4

Доброго времени суток!
Подскажите, почему, если для синий кнопки оставить только вот эти строчки -
.btn-blue .icon {
width: 28px;
height: 28px;
}

.btn-blue .hidden {
left: 15px;
top: 12px;
}

  • все равно не появится вторая иконка с классом .hidden?

#5

Из-за класса .hidden.

.hidden {
    position: absolute;
    opacity: 0;
}

#6

Точно, не увидел. Спасибо!


#7

Добрый день. Подскажите для чего в коде

            <span class="hidden"><img src="envelope-open-6x-white.png"></span>

img оборачивают в SPAN?
Проверил без SPAN всё работает.