Question

Essentially I want to replicate li:hover+li but it’s a bit more complicated than that. I am playing around with CSS transitions and trying to make a dropdown menu that has a delay on closing (for usability). So in other words, when you move your mouse off the menu it doesn’t disappear instantly.

I got that working OK but when I move from one top level item to the next, the previous menu stays open for a second. Here is a simplified example without the dropdown, just transitioning the top level item. Relevant CSS:

.menu > li {
  background-color: #4F57AA;
  /* transition out */
  -webkit-transition: background-color .2s ease-in-out 1s;
}
.menu > li:hover {
  background-color: #8F002E;
  /* transition in */
  -webkit-transition: background-color .2s ease-in-out;
}
.menu > li:hover+li {
  -webkit-transition: background-color .2s ease-in-out;
}

So when you move off the menu entirely, the list item wait a second before fading back to blue. But when moving from “One” to “Two” the hover state on “One” also waits a second.

Using the sibling selector, I managed to get an instant transition when moving from right to left. Of course there is no “previous sibling” selector yet so it doesn’t work the other way round. I want to use a small bit of jQuery to trigger these transitions but this is where I’ve got stuck. I tried this:

$('.menu > li').hover(
  function() {
    // instant transition for siblings?
    $(this).siblings().css('-webkit-transition', 'background-color .2s ease-in-out');
  },
  function() {
    // revert to regular transition?
    $(this).siblings().css('-webkit-transition', 'background-color .2s ease-in-out 1s');
  }
);

But it doesn’t work. Any ideas?

Answer 1

I think you can get what you want with pure CSS. I’ve removed your last selector (using sibling) and pushed it up to the #2 cascade position and changed the selector to look for a .menu:hover first:

.menu > li {
  background-color: #4F57AA;
  /* transition out */
  -webkit-transition: background-color .2s ease-in-out 1s;
}

.menu:hover > li {
  -webkit-transition: background-color .2s ease-in-out .2s;
}

.menu > li:hover {
  background-color: #8F002E;
  /* transition in */
  -webkit-transition: background-color .2s ease-in-out;
}