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

Question

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

Рейтинг: -1Ответов: 1Опубликовано: 28.01.2023

Вот мой код, я хочу сделать подчеркивание при наведении на 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>

css html css-animation

Источник: Stack Overflow на русском

Answer 1

▲ 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="ivan@mail.ru">
</div>

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

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

Ответы