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的事实导致了问题。

P.S。我知道使用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以确保用户将鼠标悬停在元素上时没有延迟

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

àèéìòù属性无法在transition上使用，而是使用display，如：

＆＃13;

opacity

＆＃13;

#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;
}

＆＃13;

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

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

延迟“取消悬停”动作

4 个答案: