延迟“展开”动作

Question

#login-panel-ghost {
  display: none;
  transition-delay: 2s;
}
.top-menu-login:hover #login-panel-ghost {
  display: block;
  position: fixed;
  width: 250px;
  height: 180px;
  transition-delay: 2s;
}

<span class="top-menu-login">Login
  <div id="login-panel-ghost">
    <h2>Log in!</h2>
    <form>
      <input type="text" placeholder="Username">
    </form>
  </div>
</span>

现在，让我解释一下我要完成的工作：我span .top-menu-login将显示一个短语，在本例中为“登录”。此外，div #login-panel-ghost最初是隐藏的，但是当鼠标经过“登录”时，div应该会出现。

我设法做到了，问题是在鼠标移开“登录”之后，我想延迟元素消失！

到目前为止，我已经在Stack Overflow上尝试过此代码，但是我认为悬停更改另一个事实div会造成麻烦。

PS：我知道使用JavaScript应该很容易，但是我想尝试一下不使用它！

Answer 1

您使用的是正确的路线transition-delay: 2s;，但是，有几个因素意味着这不起作用：

• 您无法制作动画display，它要么存在（display: block;），要么不存在（display: none;）
• 您没有指定 a transition，因此没有任何transition-delay: 2s;效果

要使用 CSS 实现此功能，您可以执行以下操作：

• 添加height: 0;到#login-panel-ghost以有效隐藏元素
• 添加height: 180px;到.top-menu-login:hover #login-panel-ghost以有效显示元素
• 通过添加到将height其从 更改为 过渡0180pxtransition: height 0s;#login-panel-ghost
• 添加允许隐藏超出overflow: hidden;边界的内容#login-panel-ghost
• 添加transition-delay: 2s;到未将鼠标悬停#login-panel-ghost在其上时延迟过渡.top-menu-login
• 添加transition-delay: 0s;以#.top-menu-login:hover #login-panel-ghost确保用户将鼠标悬停在元素上时不会出现延迟

#login-panel-ghost {
  height: 0;
  overflow: hidden;
  transition: height 0s;
  transition-delay: 2s;
}
.top-menu-login:hover #login-panel-ghost {
  height: 180px;
  position: fixed;
  transition-delay: 0s;
  width: 250px;
}

<div class="top-menu-login">Login
  <div id="login-panel-ghost">
    <h2>Log in!</h2>
    <form>
      <input type="text" placeholder="Username" />
    </form>
  </div>
</div>