延迟“悬停”动作答案

【问题标题】：Delay "unhover" action延迟“悬停”动作
【发布时间】：2016-03-16 16:52:27
【问题描述】：

#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 应该很容易，但我想尝试不使用它！

【问题讨论】：

首先，您不应该将div 包裹在span 中：它不打算用作容器。然后，您应该在 jQuery 中使用类似 out 的事件来处理“登录框”的消失。

标签： css hover delay

【解决方案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以有效显示元素
通过将transition: height 0s; 添加到#login-panel-ghost，将height 上的转换从0 更改为180px
添加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>

【讨论】：

【解决方案2】：

transition 属性不适用于 display，而是使用 opacity 类似：

#login-panel-ghost {
    visibility: hidden;
  opacity: 0;
  transition: visibility 2s, opacity 2s;
}

.top-menu-login:hover #login-panel-ghost {
     visibility: visible;
  opacity: 1;
    position: fixed;
    width: 250px;
    height: 180px;
}

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

【讨论】：

【解决方案3】：

这是一个完整的工作示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("div.top-menu-login").on("mouseover", function(){
            $("#login-panel-ghost").show();
        });
        $("div.top-menu-login").on("mouseout", function(){
            $("#login-panel-ghost").hide({duration:2000});
        });
    });
</script>
<style>
    #login-panel-ghost {
        display: none;
    }

    .top-menu-login:hover #login-panel-ghost {
        position: fixed;
        width: 250px;
        height: 180px;
    }
</style>
<div class="top-menu-login">Login
    <div id="login-panel-ghost">
        <h2>Log in!</h2>
        <form>
            <input type="text" placeholder="Username">
        </form>
    </div>
</div>

你唯一要做的就是自定义hide对象来选择效果，...你想要的。

您可以在此处查看此参数：http://api.jqueryui.com/hide/

【讨论】：

【解决方案4】：

$(function(){
    $("element").hover(function(){
    $(this).parent().css('background-color', '#color');
    }, function(){
        // change to any color that was previously used.
        $(this).parent().css('background-color', '#color');
    });
});

使用 jQuery 更容易。祝你好运！

【讨论】：