Почему при наведении на блок с opacity: 0 я не получаю opacity: 1?

Question

[Влад]

Написал форму для отправки с сайта сообщений и споткнулся на ровном месте.
Подсказка в виде текста ошибки выводится только при наведении на input, хотя в CSS (см. код ниже) я это прописываю.
Вот здесь форма "Заказать ремонт" https://gidroprofi.ru/contacts

Вот SCSS на примере поля "Ваше имя":

.order-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
  
  
      &__name-wrp {
          position: relative;
          width: 100%;
          height: 90px;
      }
  
      &__name {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          padding: 15px 25px 15px 30px;
          font-size: 26px;
          width: 100%;
          height: 100%;
          background: transparent;
          border-radius: 55px;
          border: 1px solid #fff;
  
          &[placeholder] {
              padding-left: 48px;
              color: #fff !important;
              font-family: 'Inter Regular';
              font-size: 26px;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
          }
  
          &:focus {
              outline: 1px solid #af9a7b;
          }
      }
  
      &__name-placeholder {
          position: absolute;
          top: 50%;
          left: 40px;
          transform: translateY(-50%);
          width: 60%;
          padding: 5px;
          color: #666;
          font-family: 'Inter Regular';
          font-size: 24px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
          border: 0;
          transition: all 200ms;
      }
  
      %error-before-style {    // общие стили для всех полей
        position: absolute;
        opacity: 0;
        top: 50%;
        right: 40px;
        padding: 10px;
        transform: translateY(-50%);
        font-family: 'Inter Regular';
        font-size: 22x;
        font-style: normal;
        font-weight: 400;
        color: #c80000;
        white-space: nowrap;
        border: 1px solid #c80000;
        border-radius: 12px;
        transition: all 300ms ease-in-out;
      }
      .no-before {   // добавляем класс для удаления `content` из псевдоэлемента,
                   // применяем к `order-form__name-error` при корректной валидации
        &::before {
          content: "";
          border: none;
        }      
      }
      &__name-error {
        opacity: 0;
        
        &::before {
          content: "Некорректное имя";
          @extend %error-before-style;
        }
  
        &:hover, &::before:hover {
          opacity: 1;
        }
      }
  
      &__name:hover ~ &__name-error::before,
      &__name:focus ~ &__name-error::before,
      &__name-placeholder:hover ~ &__name-error::before,
      &__phone:hover ~ &__phone-error::before,
      &__phone:focus ~ &__phone-error::before,    
      &__phone-placeholder:hover ~ &__phone-error::before,
      &__message:hover ~ &__message-error::before,
      &__message:focus ~ &__message-error::before,    
      &__message-placeholder:hover ~ &__message-error::before {
        opacity: 1;
      }
}

Не знаю есть ли смысл приводить JS, он получился немаленький и в нём нет работы с псевдоклассом класса `order-form__name-error`.

P.S.

• Не охота переписывать без псевдоэлементов
  
• Так же не охота вместо opacity использовать display, так как исчезнет плавность, т.е. возможность использовать trasition
  

Comments

[Ankhena]

1. https://developer.mozilla.org/en-US/docs/Web/CSS/p...
2. &::before:hover это дичь/ У псевдоэлементов нет состояний.
3. Нельзя писать текст ошибки в псевдоэлемент. Это контент, который должен быть доступен всем.

[Влад]

Ankhena, я так и думал ) Значит придётся переписать )

А вот так не дичь? )

.order-form__name:hover ~ .order-form__name-error::before {
        opacity: 1;
     }

[Ankhena]

Влад, заметно проще использовать п1

[Kentavr16]

А подчеркивания в именах - что это? БЭМ?

[Ankhena]

Kentavr16, Что-то БЭМоподобное