Почему всегда работает «активный» класс к блоку?

Question

b_tema_rd @b_tema_rd

Почему всегда работает «активный» класс к блоку?

я задал два класса для блока и с помощью js при наведении хочу менять не активный на активный класс, но почему то всегда работает только активный. что я делаю не так?

<nav class="nav">
				<ul class="nav_list">
					<li class="nav_list_item">
						<a href="#" class="nav_list_link">
							<div class="nav_block_link">
							<img src="img/kitchen.png" class="nav_list_link_img">
							<div class="nav_list_link_txt">мебель для кухни</div>
							</div>
						</a>
							<div class="dropbox active_dropbox">
								<ul class="nav_twolvl">
									<li class="nav_twolvl_list">
										<a href="#" class="nav_twolvl_list_link">подкатегория</a>
									</li>
									<li class="nav_twolvl_list">
										<a href="#" class="nav_twolvl_list_link">подкатегория</a>
									</li>
									<li class="nav_twolvl_list">
										<a href="#" class="nav_twolvl_list_link">подкатегория</a>
									</li>
								</ul></div>

					</li>

.dropbox{
	position: absolute;
	height: 100vh;
	width: 26.5vw;
	top: 3vh;
	right: -50vw;
	background-color: #cccccc;
	z-index: -2;
	opacity: 0;
	overflow-x: hidden;
	border-radius: 30px;
	transition: .5s;
	transform: translateX(-27vw);
	
}
.active_dropbox{
	z-index: 5;
	opacity: 1;
	transform: translateX(0);
}

$(".dropbox").hide();
$( ".nav_list_item" ).mouseenter(function() {
    $( this ).children( ".dropbox" ).addClass('active_dropbox');
  });
$( ".nav_list_item" ).mouseleave(function() {
   $( this ).children( ".active_dropbox" ).removeClass('active_dropbox');
  });

Вопрос задан более двух лет назад
97 просмотров

10 комментариев

Подписаться 1 Простой 10 комментариев

Rst0 @Rst0

а тот, что я в первый раз предложил работает?

$(".dropbox").hide();
$( ".nav_list_item" ).mouseover(function() {
    $( this ).children( ".dropbox" ).addClass('active_dropbox');
  });
$( ".nav_list_item" ).mouseout(function() {
   $( this ).children( ".active_dropbox" ).removeClass('active_dropbox');
  });

Написано более двух лет назад

Ankhena @Ankhena Куратор тега CSS

Есть какое-то объяснение, зачем вы это делаете на js?
Я понимаю, при клике, но при hover зачем?

Написано более двух лет назад
b_tema_rd @b_tema_rd Автор вопроса

Rst0, технически всё осталось без изменений, я уже несколько раз файл с js переподключил, проверил но ничего не работает

Написано более двух лет назад
b_tema_rd @b_tema_rd Автор вопроса

Ankhena, я новичок и только учусь, если есть предложения как сделать без js буду рад выслушать

Написано более двух лет назад

Rst0 @Rst0

Вы зря советов `умных` в первый раз послушались.
эти советы не для вашей верстки + jquery.
я поэтому вам mouseout в пример вписал вместо mouseleave
...вернемся к первому варианту ))
css накидал для тестов на скорую - гляньте как оно устроено.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <style>
            body * {
                box-sizing: border-box;
            }

            .nav {
                width: 200px;
                height: 100vh;
                background: antiquewhite;
            }

            .nav_list {
                padding: 0;
            }

            .nav_list li {
                list-style: none;
                position: relative;
                background: antiquewhite;
                border-bottom: 1px #333 solid;
            }

            .nav_list li a {
            }

            .nav_block_link {
                display: flex;
                font-size: 20px;
                padding: 12px;
            }

            .nav_list li:hover {
                background: aliceblue;
            }

            .dropbox {
                position: absolute;
                height: 100vh;
                width: 0;
                background-color: #cccccc;
                opacity: 0;
                overflow-x: hidden;
                border-radius: 30px;
                transition: .5s;
                transform: translateX(-27vw);
                left: 0;
                transition: opacity 0.3s cubic-bezier(.66,.74,.58,.92) .1s;
                top: 0;
            }

            .active_dropbox {
                width: 26.5vw;
                opacity: 1;
                transform: translateX(0);
                display: block !important;
                left: 100%;
            }

            .nav_twolvl {
                padding: 0;
            }

            .nav_twolvl li {
            }

            .nav_twolvl li a {
                display: flex;
                font-size: 20px;
                padding: 12px 12px 13px;
            }
        </style>
    </head>
    <body class="bg-light">
        <main>
            <!--content-->
            <nav class="nav">
                <ul class="nav_list">
                    <li class="nav_list_item">
                        <a href="#" class="nav_list_link">
                            <div class="nav_block_link">
                                <img src="img/kitchen.png" class="nav_list_link_img">
                                <div class="nav_list_link_txt">мебель для кухни</div>
                            </div>
                        </a>
                        <div class="dropbox active_dropbox">
                            <ul class="nav_twolvl">
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_list_item">
                        <a href="#" class="nav_list_link">
                            <div class="nav_block_link">
                                <img src="img/kitchen.png" class="nav_list_link_img">
                                <div class="nav_list_link_txt">мебель для кухни</div>
                            </div>
                        </a>
                        <div class="dropbox ">
                            <ul class="nav_twolvl">
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_list_item">
                        <a href="#" class="nav_list_link">
                            <div class="nav_block_link">
                                <img src="img/kitchen.png" class="nav_list_link_img">
                                <div class="nav_list_link_txt">мебель для кухни</div>
                            </div>
                        </a>
                        <div class="dropbox ">
                            <ul class="nav_twolvl">
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_list_item">
                        <a href="#" class="nav_list_link">
                            <div class="nav_block_link">
                                <img src="img/kitchen.png" class="nav_list_link_img">
                                <div class="nav_list_link_txt">мебель для кухни</div>
                            </div>
                        </a>
                        <div class="dropbox ">
                            <ul class="nav_twolvl">
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
        </main>
        <script>

            $(".dropbox").hide();
            $(".nav_list_item").mouseover(function(event) {
                event.preventDefault();
                $(this).children(".dropbox").addClass('active_dropbox');
                $(this).children(".active_dropbox").css('display', 'block');

            });

            $(".nav_list_item").mouseout(function() {
                event.preventDefault();
                $(this).children(".active_dropbox").removeClass('active_dropbox');
                $(this).children(".active_dropbox").css('display', 'none');
            });
        </script>
    </body>
</html>

Написано более двух лет назад

Rst0 @Rst0

первый пункт оставил открытым

<div class="dropbox active_dropbox">
                            <ul class="nav_twolvl">
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                                <li class="nav_twolvl_list">
                                    <a href="#" class="nav_twolvl_list_link">подкатегория</a>
                                </li>
                            </ul>
                        </div>

чтоб на старте понятнее было чего происходит

Написано более двух лет назад

b_tema_rd @b_tema_rd Автор вопроса

Rst0, огромное вам человеческое спасибо

Написано более двух лет назад
b_tema_rd @b_tema_rd Автор вопроса

Rst0, проверил, всё работает, вы мой спаситель, я сам трое суток не мог решить)

Написано более двух лет назад
Rst0 @Rst0

на здоровье)

Написано более двух лет назад
Ankhena @Ankhena Куратор тега CSS

b_tema_rd, https://jsfiddle.net/0xf2qrka/
Но при этом нужно понимать, что не должно быть зазора между пунктами основного меню и выпадашками.
Либо туда подкладывать псевдо или прозрачную часть div.

Написано более двух лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Похожие вопросы

JavaScript

Средний
Как реализовать логику назад вперед?
- 1 подписчик
- 14 минут назад
- 10 просмотров
0

ответов
HTML

+1 ещё

Простой
Почему дублируются изображения?
- 1 подписчик
- 2 часа назад
- 50 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- 21 час назад
- 120 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 50 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 171 просмотр
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- вчера
- 106 просмотров
1

ответ
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 23 нояб.
- 107 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 106 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 715 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать бэкэнд на Node.js

25 нояб. 2024, в 18:39

30000 руб./за проект

Разработать бэкэнд на Django

25 нояб. 2024, в 18:35

30000 руб./за проект

Перенести сайт на CMS Wordpress c Tilda

25 нояб. 2024, в 18:33

10000 руб./за проект

а тот, что я в первый раз предложил работает?

$(".dropbox").hide(); $( ".nav_list_item" ).mouseover(function() { $( this ).children( ".dropbox" ).addClass('active_dropbox'); }); $( ".nav_list_item" ).mouseout(function() { $( this ).children( ".active_dropbox" ).removeClass('active_dropbox'); });
Есть какое-то объяснение, зачем вы это делаете на js?
Я понимаю, при клике, но при hover зачем?
Rst0, технически всё осталось без изменений, я уже несколько раз файл с js переподключил, проверил но ничего не работает
Ankhena, я новичок и только учусь, если есть предложения как сделать без js буду рад выслушать
первый пункт оставил открытым

<div class="dropbox active_dropbox"> <ul class="nav_twolvl"> <li class="nav_twolvl_list"> <a href="#" class="nav_twolvl_list_link">подкатегория</a> </li> <li class="nav_twolvl_list"> <a href="#" class="nav_twolvl_list_link">подкатегория</a> </li> <li class="nav_twolvl_list"> <a href="#" class="nav_twolvl_list_link">подкатегория</a> </li> </ul> </div>

чтоб на старте понятнее было чего происходит
Rst0, огромное вам человеческое спасибо
Rst0, проверил, всё работает, вы мой спаситель, я сам трое суток не мог решить)
b_tema_rd, https://jsfiddle.net/0xf2qrka/
Но при этом нужно понимать, что не должно быть зазора между пунктами основного меню и выпадашками.
Либо туда подкладывать псевдо или прозрачную часть div.

Почему всегда работает «активный» класс к блоку?

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

Минуточку внимания

Войдите на сайт