悬停并输入时输入文字消失

问题描述

我似乎找不到我正在使用Gatsby的问题，并且我创建了一个Ref来处理输入的表单验证，由于某些原因，一些非常基本的东西出错了

以下是html：

<form onSubmit={(event) => handleSubmit(event,email)}>
   <label htmlFor="email">Our newsletter</label>
      <input
       value={email || ''}
       name="email"
       placeholder="La tua e-mail"
       type="text"
       spellCheck="false"
       className="input"
       onChange={() => setEmail(myRef.current.value)}
       ref={myRef}
        />
         <button className="button" onClick={checkInput} type="submit">
          Iscriviti
          </button> 
           {message && (
             <>
              <br />
               <small>{message.substring(0,45)}</small>
             </>
            )}
 </form>

这些是功能

  const [message,setMessage] = useState();
 
  const [email,setEmail] = useState('');

  let myRef = useRef();

  function handleSubmit(event,email) {
    event.preventDefault();
    addToMailchimp(email) // listFields are optional if you are only capturing the email address.
      .then((data) => {
        // I recommend setting data to React state
        // but you can do whatever you want (including ignoring this `then()` altogether)
        setMessage(data.msg);
      })
      .catch(() => {
        // unnecessary because Mailchimp only ever
        // returns a 200 status code
        // see below for how to handle errors
      });
  }

  const checkInput = () => {
    console.log(myRef);
    if (myRef.current.value === '') {
      setErrorFor();
    } else if (!isEmail(myRef.current.value)) {
      setErrorFor();
    } else {
      setSuccessFor();
    }
  };

  function setErrorFor() {
    const formControl = myRef.current;
    formControl.className = 'error shaka';
  }

  function setSuccessFor() {
    const formControl = myRef.current;
    formControl.className = 'success';
  }

  function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
      email
    );
  }

这是CSS

 form {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-direction: column;
      width: 45%;
      @media only screen and (max-width: 699px) {
        width: 100%;
        text-align: center;
      }

      label {
        font-size: calc(1.3rem + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
        text-transform: uppercase;
        font-weight: bolder;
        font-family: 'Acme',sans-serif;
        letter-spacing: 0.1rem;
        @media only screen and (max-width: 699px) {
          text-align: center;
          margin: 4rem auto 0 auto;
          font-size: calc(2rem + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
        }
      }
    }

    input {
      width: 100%;
      max-width: 320px;
      min-width: 150px;
      border: none;
      padding: 0.5rem;
      border-radius: 3px;
      margin-top: 1rem;
      height: 2.5rem;
      font-size: 1rem;
      color: black;
      @media only screen and (max-width: 699px) {
        width: 100%;
        min-width: 100%;
      }
    }
    .button {
      height: 2.5rem;
      border: 1px solid white;
      margin-top: 1rem;
      width: 100%;
      max-width: 320px;
      min-width: 150px;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 3px;
      background-color: cornflowerblue;
      color: white;
      font-size: 1.3rem;
      font-family: 'Acme',sans-serif;
      @media only screen and (max-width: 699px) {
        width: 100%;
        min-width: 100%;
      }
    }

    .success {
      border: 2px solid $maingreen;
    }

    .error {
      border: 2px solid red;
    }

    .input {
      z-index: 5;
      outline: none;

      :focus,:hover {
        outline: none;
        text-rendering: optimizeLegibility;
        text-indent: inherit;
        z-index: 5000000000000000000000;
        display: flex;
        font-size: inherit;
        color: inherit;
      }
    }

    .input:hover {
      z-index: 5;
      color: inherit;
    }

    .shaka {
      animation: shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both;
      transform: translate3d(0,0);
      backface-visibility: hidden;
      perspective: 1000px;
      animation-duration: 1s;
    }
    @keyframes shake {
      10%,90% {
        transform: translate3d(-1px,0);
      }
      20%,80% {
        transform: translate3d(2px,0);
      }
      30%,50%,70% {
        transform: translate3d(-4px,0);
      }
      40%,60% {
        transform: translate3d(4px,0);
      }
    }
  }

实时示例：不知道黑色边框是什么，也许在验证它正常后，在所有浏览器中的故事都是相同的

如果您发现自己遇到了同样的问题，我想知道发生了什么。谢谢

解决方法

我不明白为什么您要在输入中使用z-index， 将其删除，并在input：hover

中删除z-index ,

对我来说，悬停时消失的文字看起来像是继承颜色，将继承颜色更改为＃000。

.input:hover {
      z-index: 5;
      color: inherit;
    }