Почему не работает свойство hover?

Question

Вот мой код, я хочу сделать подчеркивание при наведении на input.

.form_field_container::after {
    content: "";
    position: absolute;
    bottom: -2px;
    height: 2px;
    background-color: red;
    left: 0;
    transition: all 10s;
    width: 10px;
}

.form_input:hover .form_field_container::after {
    width: 100%;
}

.form_field_container:hover::after{}

Если сделать after при наведении на сам элемент, который нужно подчеркнуть, то все работает, а если сделать .form_input:hover .form_field_container::after, то почему-то свойство перестает применяться

HTML

<div class="form_field_container" style="margin-bottom: 22px">
                <span class="enter_label">Логин</span>
                <input type="text" placeholder="Введите ваш логин или электронную почту" 
                name="login" class="form_input login_input">

</div>

Answer 1

Как уже было верно подмечено в комментариях, CSS не позволяет обращаться к родителям и вышестоящим элементам (пример, мой вопрос), поэтому нужно либо менять логику, либо использовать JavaScript.

body {
  max-width: 15rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}
.form-group input {
  border: none;
  border-bottom: 1px solid transparent;
  outline: none;
}
.form-group:hover input,
.form-group input:focus {
  border-bottom: 1px solid #000;
}

<div class="form-group mb-2">
  <label class="form-label" for="txtLogin">Login</label>
  <input type="text" class="form-control" id="txtLogin" placeholder="[email protected]">
</div>

<div class="form-group">
  <label class="form-label" for="txtPassword">Password</label>
  <input type="password" class="form-control" id="txtPassword" placeholder="12345678">
</div>

БЛОГ НА HUSL

Почему не работает свойство hover?

Ответы (1 шт):