CODEWITHSUNDEEP
csshovercss-transitions
Brian
Brian

Reputation: 25824

How can I avoid transition delays when switching hover between siblings?

How can I avoid transition delays when switching hover between siblings without javascript?

My goal is to produce a mega menu with the following behavior:

  1. If the user hovers over a given mega menu for 1.5 seconds, the menu will open.
  2. If the user moves the mouse away from the mega menu entirely, the mega menu closes instantly.
  3. If the user moves the mouse from one mega menu item to another, the second menu replaces the first menu.

My current variation, shown below, has the following behavior (difference is bold):

  1. If the user hovers over a given mega menu for 1.5 seconds, the menu will open.
  2. If the user moves the mouse away from the mega menu entirely, the mega menu closes instantly.
  3. If the user moves the mouse from one mega menu item to another, the first menu remains open for 1.5 seconds. Then, the second menu replaces the first menu.

It also has positioning glitches, but I'm ignoring those for now; this is just a prototype.

This is easily accomplished with javascript, but my goal is to do so purely using CSS3.

.power > div {
    display:inline-block;height:25px;background-color:lightblue;
    padding:0;margin:0
}

.hider {
  position:absolute;top:-999px;
  width:80%;
  background-color:pink;
}

.power div:hover .hider {
  top:25px;
  left:0px;
  transition: all 0s 1.5s;
}

.power:hover div .hider{
  background-color:orange;
  transition: all 0s 1.5s;
}
<div class="power">
  <div class="one">Menu-One
    <div class="hider"><br/></br/>One</div>
  </div>
  <div class="two">Menu-Two
    <div class="hider"><br/></br/>Two</div>
  </div>
</div>

Upvotes: 1

Views: 83

Answers (1)

Asons
Asons

Reputation: 87191

You can do that by for example using opacity, like this, where you have a delay on the opacity (affects all) and an individual re-positioning for each sub menu (with no transition)

.power > div {
  display: inline-block;
  height: 25px;
  background-color: lightblue;
  padding: 0;
  margin: 0
}
.hider {
  position: absolute;
  top: -999px;
  opacity: 0;
  width: 80%;
  background-color: pink;
}
.power div:hover .hider {
  left: 0px;
  top: 25px;
}
.power:hover div .hider {
  opacity: 1;
  background-color: orange;
  transition: opacity 0s 1.5s;
}
<div class="power">
  <div class="one">Menu-One
    <div class="hider">
      <br/>
      <br/>One
    </div>
  </div>
  <div class="two">Menu-Two
    <div class="hider">
      <br/>
      <br/>Two
    </div>
  </div>
</div>

Upvotes: 2

Related Questions