Delay "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>

Now, let me explain what I would like to accomplish: I've a span .top-menu-login which will be displayed as a phrase, in this case "Login". Furthermore, the div #login-panel-ghost is originally hidden, but when the mouse passes over "Login" the div should appear.

I managed to do that, the problem is that I would like to delay the element disappearing after the mouse unhovers the "Login"!

I've tried this code so far, that I found on Stack Overflow, but I think the fact that the hover changes another div is causing trouble.

P.S. I know it should be easy with JavaScript, but I'd like to try without it!

Answer 1

You are on the right lines using transition-delay: 2s;, however, there are a couple of factors that mean this won't work:

• You cannot animate display, it is either there (display: block;) or not (display: none;)
• You are not specifying a transition so there is nothing for transition-delay: 2s; to effect

To make this work using CSS you can do the following:

• Add height: 0; to #login-panel-ghost to effectively hide the element
• Add height: 180px; to .top-menu-login:hover #login-panel-ghost to effectively show the element
• Transition on the height changing it from 0 to 180px by adding transition: height 0s; to #login-panel-ghost
• Add overflow: hidden; to allow the content that exceeds the boundries of #login-panel-ghost to be hidden
• Add transition-delay: 2s; to #login-panel-ghost to delay the transition when .top-menu-login is not hovered over
• Add transition-delay: 0s; to #.top-menu-login:hover #login-panel-ghost to ensure there is no delay when the user hovers over the element

#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 2

transition property not work on display instead use opacity like:

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

Answer 3

Here is a complete working example:

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

The only thing you have to do is to customize the hide object to choose effect, ... you want.

You can check this parameters here : http://api.jqueryui.com/hide/