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 can i expand the content through css?

    How to Auto set the height of a div using the height of another div

    my website not worked in Ipad and how I can fix some small issue? [closed]

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    How do I get css links to resolve correctly when adding a PathInfo value?

    Showing images next to paragraph

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    How to get css div to stretch to 100% of window

    How to debug less css variables

    how to edit a css selector in order to shorten the amount of characters used in file

    How to underline gaps created with CSS columns property?

    How do I get spotlight/shadow position to remain exactly same relative horizontal center position regardless of zoom?

    How to code a scrolling frame in css

    How to create a custom scrollbar on a div (Facebook style)

    Show div on hover span styling

    How to remove the arrows in a scroll bar through CSS

    How can I make one item with its own class a different colour from others?

    Interface problem the right css style is not being called. How to call the right one?

    How to “mark” a UL/LI nav item as “active” based on click?

    HTML/CSS - How do I fill background of region to left of div that shrinks on zoom out?

    How to define a Click handler function for multiple elements at the same time

    How to configure css flexbox so height of one of the block depends on it content?

    How to debug(make page look like in Firefox) CSS in IE? [duplicate]

    CSS: how to make a horizontal images scroller with two images per column?

    how to load css rules using javascript?

    How to calculate x and y of a circle for CSS

    How to style radcombobox item so that words that wrap are separated

    How use horizonal scorll div content div

    How to handle Chrome rendering dynamically added elements with incomplete CSS