Delay the css:hover state on mouseout

Question

I have a level 2 dropdown menu, where the mouse have to travel a pretty narrow corridor to keep the menu open, and if it gets off the track, the menu closes unexpectedly, this is frustrating. I want to make the menu not to close immediately, but with a delay.

it is a standard menu made with css like tis:

ul.menu li ul {
    display: none;
}
ul.menu li:hover ul {
    display:block;
}

I need when there is no more in hover state, the menu to still be visible for at least 0.5 seconds.

have tryed this, but it is not working:

<script>
$( ".menu li" ).mouseout(function() {
    $(".menu li ul").css("display: block");
    $(".menu li ul").css.setTimeout("display: none", 2000);
});
</script>

There is a way to add a display: block property with jqerry for 0.5 seconds after mouseout? — Botond Vajna, Jul 11 '18 at 10:54
@Pete that's definitely cleaner than mine, I'm removing my answer and will remember of yours ;) — sjahan, Jul 11 '18 at 11:05
Not sure why this has been re-opened. It's clearly a duplicate and the answers are **exactly** the same as in the suggested Q&A — Paulie_D, Jul 11 '18 at 11:20
@Paulie_D sorry, I re-opened it as none of the answers in the dupe showed how to delay the fadeout by half a second - they just showed how to do display block to none transition — Pete, Jul 11 '18 at 11:55
Adding a delay is a minor extension to the dupe not really worthy of re-opening such an ovbious dupe. — Paulie_D, Jul 11 '18 at 11:58
Yeah, but as it was the main part of the question and OP doesn't seem to know how to do animations at all I thought a bit of help wouldn't go amiss. Besides my answer isn't in the dupes and I think using pointer events is cleaner than visibility — Pete, Jul 11 '18 at 11:59

score 5 · Accepted Answer · answered Jul 11 '18 at 11:07

You can use a transition with a delay for the bit to make it stay visible on your hover out:

.nested {
  pointer-events:none;       /* this is so it behaves like display none and mouse does not interact with child when hidden */
  opacity: 0;
  transition: opacity 0.1s;  /* change length to longer for a nicer fade */
  transition-delay: 1s;      /* fadeout won't happen for a second */
}
.hover:hover .nested {
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.1s;    /* fade in when hovered */
  transition-delay: 0s;        /* fade in immediately */
}

<div class="hover">
  hover
  <div class="nested">
  nested
  </div>
</div>

In the above, your ul would be the .nested and your parent li would be .hover

Bhushan Kawadkar · Answer 2 · 2018-07-11T10:58:37.607

2

Try this: Use transition property of CSS3 with visibility and you can make it smooth. increase transition time in seconds as per your requirement.

ul.menu li ul {
  visibility: hidden;
  opacity: 0;
}
ul.menu li:hover ul {
  visibility: visible;
  transition: visibility 0s, opacity 1.5s linear;
  opacity: 1;
}

<ul class="menu">
  <li>Menu
     <ul>
      <li>Menu inside menu</li>
     </ul>
  </li>
</ul>

NOTE: i have give class "menu" to ul and hence changed the css classes. Please make changes in your code accordingly

edited Jul 11 '18 at 10:58

answered Jul 11 '18 at 10:53

Bhushan Kawadkar

28,279
5
35
57

OP needs the opposite: a delay when hover state is over, not when it is started... Pay attention to the question. – sjahan Jul 11 '18 at 10:54
@sjahan, I did undestand in other way. In this case OP can reverse the CSS. I have updated it in my post. please see – Bhushan Kawadkar Jul 11 '18 at 10:59
Thank you this is working, I just added the transition to the ul.menu li ul, not for the :hover to reverse. – Botond Vajna Jul 11 '18 at 12:04

score 1 · Answer 3 · answered Jul 11 '18 at 11:01

You can use transitions like this:

ul.menu {
  position: relative;
  background: lime;
  width: 150px;
}

ul.menu li ul {
  position: absolute;
  background: red;
  visibility: hidden;
  opacity: 0;
  right: 0;
  margin-top: -14px;
  transition: visibility 1.5s linear 1s, opacity 1.5s linear 1s;
}

ul.menu li:hover ul {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0s;
}

<ul class="menu">
  <li>
    link a
  </li>
  <li>
    link b
    <ul>
      <li>link b - 1</li>
      <li>link b - 2</li>
    </ul>
  </li>
  <li>
    link c
  </li>
</ul>

Delay the css:hover state on mouseout

3 Answers3