代码之家  ›  专栏  ›  技术社区  ›  user9433918

不应悬停的不可见元素

  •  2
  • user9433918  · 技术社区  · 7 年前

    我已经为我的导航栏编写了一个下拉式登录表单,它工作正常但不完全正常,当我悬停在表单出现的区域时,它似乎也会下降:

    鼠标只是在出现下拉列表的区域上悬停,但它不应该这样做,当我只在“Ingrear”上悬停时,它应该下降,如何解决这个问题?另外,我不希望我的鼠标看起来像我可以点击表单,它应该看起来正常。

    .login-box {
      width: 350px;
      height: 420px;
      padding: 80px 40px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, .8);
      position: absolute;
      right: 0px;
      top: 100%;
      opacity: 0;
    }
    .menu li:hover .login-box {
      opacity: 1;
    }
    h2 {
      margin: 0;
      padding: 0 0 10px;
      color: #efed40;
      text-align: center;
    }
    .login-box p {
      margin: 0;
      padding: 0;
      font-weight: bold;
      color: white;
    }
    .login-box input {
      width: 100%;
      margin-bottom: 20px;
    }
    .login-box input[type="text"],
    .login-box input[type="password"] {
      border: none;
      border-bottom: 1px solid #fff;
      background: transparent;
      outline: none;
      height: 40px;
      color: #fff;
      font-size: 16px;
    }
    ::placeholder {
      color: rgba(255, 255, 255, .3);
      font-family: sans-serif;
      font-weight: bold;
    }
    .login-box input[type="submit"] {
      border: none;
      outline: none;
      height: 40px;
      color: #fff;
      font-size: 16px;
      background: #ff267e;
      cursor: pointer;
      border-radius: 20px;
    }
    .login-box input[type="submit"]:hover {
      background: #efed40;
      color: #262626;
    }
    .login-box a {
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none;
    }
    <ul class="menu">
      <li>INICIO</li>
      <li class="with-arrow">CONTACTO</li>
      <li class="with-arrow">REGISTRATE</li>
      <li class="with-arrow">INGRESAR
        <div class="login-box">
          <h2>Ingresa tus datos</h2>
          <form>
            <p>CORREO</p>
            <input type="text" name="" placeholder="Escribir e-mail">
            <p>CONTRASEÑA</p>
            <input type="password" name="" placeholder="Escribir Contraseña">
            <input type="submit" name="" value="Listo">
            <a href="">¿Contraseña olvidada?</a>
          </form>
        </div>
      </li>
    </ul>
    1 回复  |  直到 7 年前
        1
  •  0
  •   SpaceDogCS    7 年前

    您需要将下拉列表设置为不可见,以便不能在其中应用悬停事件

    .login-box{
      width: 350px;
      height: 420px;
      padding: 80px 40px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, .8);
      position: absolute;
      right: 0px;
      top: 100%;
      opacity: 0;
      /* === NEW ==== */
      visibility: hidden;
    }
    .menu li:hover .login-box{
      opacity: 1;
      /* === NEW ==== */
      visibility: visible;
    }
    

    visibility