Нужно помощь с css

Общее
1

Ребят, не могу разобраться, помогите пожалуйста.
Была задача: сделать поиск, эффекты при наведении, эффекты при фокусе (активном инпуте).
Проблема возникла тогда, когда при фокусе работал эффект ховера и перекрывал эффекты фокуса.
Вот такой код у меня вышел:
1

2

Спустя пару часов мучения и непониманий происходящего, я нашел макет в интернете и скопировал код. Но я до сих пор не могу понять, почему он работает… Объясните пожалуйста, как он работает. Почему здесь эффект ховера не перекрывает фокус? Запятые и плюсы. Пожалуйста…
3

2

Оформите код в песочнице, пожалуйста, посмотрим.

3

Как не работает Фокусимся на инпуте, то есть кликаем по нему, но тогда, когда он активен, то эффект ховера все равно работает.

Все работает

5

Дело в этом правиле:

.search-wrapper:hover .search-wrapper__input {
	background-color: #212a3a;
}

Когда поле получает фокус, эффект при наведении на контейнер формы всё равно работает. Во втором примере такого правила нет, в том и разница.

6

Дело в том, что я не понимаю список тех правил.
// При наведение на блок в котором находится кнопка и инпут, кнопка меняет цвет фона и меняется цвет элементов.
.search-wrapper:hover .search-wrapper__button{
background-color: #212a3a;
color: #ffffff;
}
// При активации (нажатие) на инпут
// Что значит знак плюс?
.search-wrapper__input:focus,
.search-wrapper__input:focus + .search-wrapper__button {
background-color: red;
}
// Снова активация инпута
.search-wrapper__input:focus {
color: #000000;
}
// Что значит плюс?
.search-wrapper__input:focus + .search-wrapper__button {
color: #ee3643;
}

7

Знак + означает соседний элемент (следующий в коде). То есть
.search-wrapper__input:focus + .search-wrapper__button { ... } расшифровывается как “стили для кнопки, которая находится после поля в фокусе”.

1 лайк