Как избежать переходных задержек при переключении наведения между братьями и сестрами?

Question

Как избежать переходных задержек при переключении наведения между братьями и сестрами без javascript?

Моя цель состоит в том, чтобы произвести мега меню со следующим поведением:

1. Если пользователь парит над данной мега-меню в течение 1,5 секунд, откроется меню.
2. Если пользователь полностью перемещает мышь от мега-меню, мега-меню мгновенно закрывается.
3. Если пользователь перемещает мышь из одного мегапозиционного пункта в другое, второе меню заменяет первое меню.

Моя изменение тока, как показано ниже, имеет следующее поведение (разница в том, выделены жирным шрифтом):

1. Если пользователь парит над данной мега меню в течение 1,5 секунд, меню откроется.
2. Если пользователь полностью перемещает мышь от мега-меню, мега-меню мгновенно закрывается.
3. Если пользователь перемещает мышь из одного мегапозиционного пункта в другое, первое меню остается открытым в течение 1,5 секунд. Затем,, второе меню заменяет первое меню.

У этого также есть позиционирующие сбои, но я сейчас игнорирую их; это всего лишь прототип.

Это легко выполняется с помощью javascript, но моя цель - сделать это с использованием 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>

Answer 1

Вы можете сделать это, например, с использованием opacity, как это, где у вас есть задержка на непрозрачности (влияет на все) и индивидуальное повторное позиционирование для каждого подменят (с нет никакого перехода)

.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>