Почему при наведении на блок с установленным значением непрозрачности (opacity) равным 0 не происходит его изменения на значение равное 1 при наведении?

1. При наведении на блок с установленным значением непрозрачности (opacity) равным 0 не происходит его изменения на значение равное 1 при наведении, потому что элемент с opacity: 0 полностью прозрачен и не видим для пользователя, поэтому события hover на него не срабатывают.

2. Для того чтобы подсказка в виде текста ошибки выводилась при взаимодействии с input, а не только при наведении на него, необходимо использовать псевдокласс :focus. Этот псевдокласс применяется к элементу, когда он находится в фокусе (когда на него кликнули и он активирован).

Пример SCSS для поля "Ваше имя":

.input-error {
  position: relative;
  
  input {
    border: 1px solid #ff0000;
  }
  
  .error-message {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffdddd;
    padding: 5px;
    border: 1px solid #ff0000;
    color: #ff0000;
  }
  
  input:focus + .error-message {
    display: block;
  }
} 

В этом SCSS стилизация элемента .error-message применяется только когда инпут находится в фокусе.