How to replicate this CSS sibling selector in jQuery?


Tags: jquery,css,css-transitions,user-experience

Problem :

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?



Solution :

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

    CSS Howto..

    How to auto adjust margin to Auto center vertical & horizontal using jQuery and CSS margin

    How to make a list of “background-image” CSS using WebDriver with Java

    How to set background color based on YAML front matter (Jekyll)

    How to create a vertical carousel using plain JavaScript and CSS

    How to remove string that dosn't have an html tag using CSS

    CSS Shadows (how to get rid of top shadow?)

    How to access CSS children properly?

    How to change height of ui-grid row?

    How to make the visible part of png image with transparent background as a link?

    How can I use CSS to make a multi-select box but have the label appear on top instead of to the left?

    How to make submenus have the same width as the menu CSS/HTML5

    How to add a class to a menu item that has children

    How can CSS interfere with JavaScript?

    How do I make menu background even with the header in HTML/CSS

    Dropdown not showing on small screens

    How to remove space between bootstrap columns?

    HTML - How do css/javascript files get loaded?

    How do I use css to make a row of boxes that do not wrap when browser shrinks?

    How can I select this element?

    how do i allign my div containers using css

    How to get border width in jQuery/javascript

    How to add CSS to a class through jQuery?

    How to format HTML/CSS to align with single word in sentence?

    How can I position two to always be side by side

    How to pause css animation at orginal state

    How can I add CSS animation to an element on a web page? [closed]

    How to make read more option with html/CSS?

    How to apply page css to a polymer component

    how to isolate firefox 17 rendering bug [closed]

    How to position text on bottom?