задержка перехода не работает при применении к другому div с помощью наведения - PullRequest
Новая
       33

задержка перехода не работает при применении к другому div с помощью наведения

0 голосов
/ 29 мая 2020

Я хочу сделать подменю так, чтобы оно не выпадало сразу при наведении курсора. Мне не нужно было иметь небольшую задержку, чтобы, если пользователь просто перемещает мышь и целенаправленно не указывает на меню, он не запускает его.

Тот же код, если я использую задержку перехода здесь: 

.subnav:hover  {
   display: block;
   backgroound-color: blue;
   transition-delay:1s;
}

Тогда все работает нормально. И есть фактическая задержка перехода.

Но если я сделаю это: 

.subnav:hover .subnav-content {
   display: block;
   backgroound-color: blue;
   transition-delay:1s;
}

Вся задержка исчезнет, ​​хотя две приведенные выше строки выполняются отлично, но без задержки.

Это весь код, если он вам нужен: 

header{
    position: relative;    
}
 
.flex1 {
    flex: 1;
}

 
.bottom-line {
    display: flex;
    justify-content: center;
}
 
nav {
    display: flex;
    width: 80%;
}
 
nav .subnav {
    flex: 1;
}
 
.subnav {
    overflow: hidden;
}
 
.subnav .subnav-content {
    display: none;
    position: absolute;
 
    left: 0;
    height: 50vh;
    width: 100%;
    margin-left: 0%;
 
    background-color: rgb(255, 255, 255);
    z-index: 2;
}
 
 
.subnav:hover .subnav-content {
    display: block;
    background-color: blue;
    transition-delay:1s;
}
 
 
.subnav button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
}
    <div class="bottom-line">
        <nav>
            <div class="subnav">
                <button><h2>new!</h2></button>
                <div class="subnav-content">
                    
                </div>
            </div>
    
            <div class="subnav">
                <button><h2>designers</h2></button>
                <div class="subnav-content">
                    
                </div>
            </div>
    
            <div class="subnav">
                <button><h2>clothes</h2></button>
                <div class="subnav-content">
                    
                </div>
            </div>
    
            <div class="subnav">
                <button><h2>shoes</h2></button>
                <div class="subnav-content">
                    
                </div>
            </div>
    
            <div class="subnav">
                <button><h2>bags</h2></button>
                <div class="subnav-content">
                    
                </div>
            </div>
    
            <div class="subnav">
                <button><h2>accessories</h2></button> 
                <div class="subnav-content">
                    
                </div>  
            </div>
        </nav>
    </div>
...