@Kryptonit

Как реализовать активность блока по наведении?

При наведении на nav ссылку должен появляться блок с меню, при перемещении курсора с nav на страницу он должен меню должно плавно затухать, но при наведении на него вновь должно быть активным. Не знаю как это называется)).
Подскажите пожалуйста как это называется или как реализуется.
<header>
        <!-- <img src="assets/img/header-men.png" alt="" class="header-men"> -->
        <!--<div class="ave">AVE</div>-->
        <div class="banner-header">
            SHOP MEN'S COLLECTION
        </div>
        <div class="nav-choice">
            <div class="nav-choice-content">
                <div class="nav-left-menu">
                <b style="font-size: 12px;">CASUALS</b>
                <li class="nav-content-li" style="margin-top: 34px;"><a href="">Jackets</a></li>
                <li class="nav-content-li"><a href="" class="nav-content-a">Hoodies & Sweershirts</a></li>
                <li class="nav-content-li"><a href="" class="nav-content-a">Polo shirts</a></li>
                <li class="nav-content-li"><a href="" class="nav-content-a">Sportswear</a></li>
                <li class="nav-content-li"><a href="" class="nav-content-a">Trousers & Chinos</a></li>
                <li class="nav-content-li"><a href="" class="nav-content-a">T-shirts</li></a></div>
                <div class="nav-right-menu" style="margin-left: 90px;">
                    <b style="font-size: 12px;">FORMAL</b>
                    <li class="nav-content-li" style="margin-top: 34px;"><a href="">Jackets</a></li>
                    <li class="nav-content-li"><a href="" class="nav-content-a">Shirts</a></li>
                    <li class="nav-content-li"><a href="" class="nav-content-a">Suits</a></li>
                    <li class="nav-content-li"><a href="" class="nav-content-a">Trousers</a></li>
                </div>
            </div>
            <div class="nav-choice-block">
                <div class="sale">AUTUMN SALE!</div>
                <div class="up">UP TO 50% OFF</div>
            </div>
        </div>
        <div class="top-bar">
            <div class="top-bar-content">
                <div class="GBP dark ">Currently: GBP</div>
                <div class="top-bar-content-auto">
                    <div class="reg dark">Register</div>
                    <div class="reg dark ">Sign in </div>
                </div>
                <div class="basket blue"><img src="assets/img/basket.png" style="margin-right: 13px; height: 13px;" alt=""> empty </div></div>
            </div>
        </div>
        <div class="nav-parent">
            <nav>
                <li class="nav-li">WOMENS </li>
                <li class="nav-li">MENS</li>
                <li class="nav-li">THE BRAND</li>
                <li class="nav-li">LOCAL STORES</li>
                <li class="nav-li">LOOK BOOK</li>
            </nav>
            <div class="search">
                <input type="text" class="search-input" placeholder="Search..">
                <img src="assets/img/search.png" class="searching" alt="">
            </div>
        </div>
    </header>

-html

.nav-choice{
    position: absolute;
    height: 549px;
    width: 466px;
    box-shadow: 0 0 5px 10px rgba(122,122,122,0.04);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 31px;
    position: absolute;
    opacity: 0;
    z-index: -12;
    transition: opacity 2s;
}
.nav-choice.opa1{
    opacity: 1;
}


let nav = document.querySelector('nav');
    let navLi = document.querySelectorAll('.nav-li');
    let navBox = document.querySelector('.nav-choice');
    const topCoord = nav.getBoundingClientRect().top + nav.clientHeight + 1;
    let leftCoord = nav.offsetLeft,
        likes = document.querySelectorAll('.like'),
        likeParent = document.querySelector('#Items');
    function prepare(a){
        navBox.style.zIndex = '1';
        navBox.classList.add('opa1');
        navBox.style.left = `${a}px`;
        navBox.style.top = `${topCoord}px`;
    }
    navBox.addEventListener('mouseover', function(){
        navBox.classList.add('opa1');
    });
    navBox.addEventListener('mouseout', function(e){
            navBox.classList.remove('opa1');
            
                if(event.target!=navBox){
                    setTimeout(function(event){
                    navBox.style.zIndex = '-12';
                },2000);
                else{
                    while(event.target==navBox){
                        navBox.classList.add('opa1');
                        navBox.style.zIndex = '1';
                    }
                }
                }
            ;
            // while(!(e.target.classList.contains('nav-choice'))){
            //     setTimeout(function(){navBox.style.display = 'none'},2000);
            // }
        });
    nav.addEventListener('mouseout', function(event){
        navBox.classList.remove('opa1');
        // setTimeout(function(event){
        //     if(event.target!=navBox){
        //         navBox.style.zIndex = '-12';
        //     }
        // },2000);
    });
    nav.addEventListener('mouseover', function(event){
        for(let i = 0; i < navLi.length; i++){
            if(event.target==navLi[i]){
                prepare(navLi[i].offsetLeft);
            }
        }
    });
  • Вопрос задан
  • 155 просмотров
Пригласить эксперта
Ответы на вопрос 1
Bavashi
@Bavashi
Через CSS-псевдокласс hover.

Update: Kryptonit, взял ваш html&css, выкинул весь js, взял Tippy.js, что посоветовал вам WapSter, и вот что с помощью него можно примерно сделать (вкладка result):



P.S. Исходил из этого "ТЗ":

если квадратик успеет растворится окончательно, то пользователь сколько не наводи, не сможет его активировать

Kryptonit, заметьте, что js стал совсем небольшим, а главное удобным. Попробуйте почитать документацию tippy.js и доделать так как нужно вам. Понимаю, что ваш HTML&CSS черновики, но их точно надо будет переделывать в нормальный вид даже для черновика.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sportrecs Москва
от 150 000 до 200 000 ₽
от 80 000 до 100 000 ₽
Maximal Челябинск
от 60 000 до 120 000 ₽
22 сент. 2020, в 13:48
30000 руб./за проект
22 сент. 2020, в 13:46
30000 руб./за проект