css - 延迟 "unhover" Action

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 这一事实会造成麻烦。

附言我知道使用 JavaScript 应该很容易，但我想不用它试试!

Answer 1

使用 transition-delay: 2s; 是对的，但是，有几个因素意味着这行不通:

• 你不能制作动画 display , 它要么存在 ( display: block; ) 要么不存在 ( display: none; )
• 您没有指定 transition所以transition-delay: 2s;没有什么效果

要使用 CSS 完成这项工作，您可以执行以下操作:

• 添加height: 0;至 #login-panel-ghost有效隐藏元素
• 添加height: 180px;至 .top-menu-login:hover #login-panel-ghost有效地展示元素
• 关于 height 的过渡从 0 更改它至 180px通过添加 transition: 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>