Задать вопрос
Vextor-ltd
@Vextor-ltd
Webdeveloper

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

Написал форму для отправки с сайта сообщений и споткнулся на ровном месте.
Подсказка в виде текста ошибки выводится только при наведении на 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
  • Вопрос задан
  • 145 просмотров
Подписаться 1 Простой 5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы