延迟 "unhover" 动作

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，它将显示为一个短语，在本例中为 "Login"。此外，div #login-panel-ghost 本来是隐藏的，但是当鼠标经过 "Login" 时， div 应该出现。

我设法做到了，问题是我想在鼠标悬停 "Login"!

后延迟元素消失

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

P.S。我知道使用 JavaScript 应该很容易，但我想试试不使用它！

Answer 1

$(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 更容易。祝你好运！

Answer 2

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

<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/

Answer 3

您使用 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 上的过渡通过将 transition: height 0s; 添加到 #login-panel-ghost

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>

Answer 4

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>

延迟 "unhover" 动作

Delay "unhover" action

css

delay

hover