Как остановить выполнение функции «hover» в JQuery на другие классы?

Question

[Mad-cote]

Здравствуйте, имеется выпадающее меню:


Я попробовал добавить простую функцию: чтобы при выделении раскрывающегося списка верхний пункт меню "Создание сайтов" оставался таким же, т.е. как бы активным.

$('.head_menu li ul').hover(function() {
			$('.head_menu .drops_link').addClass('active');
			$('.head_menu .drop').addClass('activeDrop');
			
			
		}, function(){
			$('.head_menu .drops_link').removeClass('active');
			$('.head_menu .drop').removeClass('activeDrop');
		});

Но, в итоге получается такое безобразие:


Возможна ли моя задумка? Я знаю, что на анимацию есть stop(), а как быть при "hover"?

Answer 1

[Юрий Лобанов]

Вам нужно обращаться не ко всем элементам в главном меню, а к родителю конкретного. Что-то типа вот этого:

$('.head_menu li ul').hover(function() {
			$(this).parent('.head_menu .drops_link').addClass('active');
			$(this).parent('.head_menu .drop').addClass('activeDrop');
			
			
		}, function(){
			$(this).parent('.head_menu .drops_link').removeClass('active');
			$(this).parent('.head_menu .drop').removeClass('activeDrop');
		});

Если не сработает — приведите верстку. Ключевое здесь использование $(this).

P.S.: А вообще такое можно решить через css.

Answer 2

[Mad-cote]

<li><a href="#">Главная</a></li>

            <li><a class="drops_link" href="#">Создание сайтов<span class="drop"></span></a>
              <ul >
                <li><a href="#">Сайт-визитка</a></li>
                <li><a href="#">Сайт для бизнеса</a></li>
                <li><a href="#">Лендинг</a></li>
                <li><a href="#">Информационный портал</a></li>
                <li><a href="#">Интернет-магазин</a></li>
              </ul>
            </li>

            <li><a class="drops_link" href="#">SEO<span class="drop"></span></a>
              <ul>
                <li><a href="#">Поисковое продвижение</a></li>
                <li><a href="#">Контекстная реклама</a></li>
              </ul>
            </li>

Теперь CSS:

.head_menu {position:absolute; right:0; top:45px;}
.head_menu ul {}
.head_menu ul li {
	float:left;
	margin:0 5px;
	position:relative;
}
.head_menu ul li a {
	font-family: 'SegoePrintRegular';
	color:#000;
	text-decoration:none;
	font-size:1.125em;
	padding:5px 10px;
}
.head_menu ul li a:hover {
	background:rgba(0,0,0,0.1);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
.head_menu .active {
	background:rgba(0,0,0,0.1);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
/* CSS треугольник */
.head_menu .drop {
	background-image:url(img/head_drei.png);
	background-position:center;
	background-repeat:no-repeat;
	width:10px; height:10px;
	position:absolute;
	bottom:-20px;
	left:47%;
}
.head_menu ul li a:hover .drop {background-image:url(img/head_drei_hover.png);}

.head_menu .activeDrop {background-image:url(img/head_drei_hover.png) !important;}
/* -------------------- */

/* -------------------- */
/* DROP MENU */
/* -------------------- */
/* Прячем меню */
.head_menu li ul {
	z-index:999;
	visibility:hidden;
	opacity:0;
	position:absolute;
	top:25px;
	left:10px;
	-webkit-transition:all 0.3s ease-in 0s;
	-moz-transition:all 0.3s ease-in 0s;
	transition:all 0.3s ease-in 0s;
}
/* Показываем меню */
.head_menu li:hover ul, .head_menu li ul:hover {visibility:visible; opacity:1;}
.head_menu .drops ul:hover  {color:#fff;}
/* Выпадающее меню дизайн */
.head_menu li ul li {margin:6px 0;}
.head_menu li ul li:before {
	content:url("img/droplink.png");
	position:absolute;
	bottom:3px;
}
.head_menu li ul li a {
	font-size:16px;
	white-space:nowrap;
	padding:0;
	margin:5px 10px;
}
.head_menu li ul li a:hover {
	background:none;
	border-bottom:1px dashed #000;
	border-radius:0;
}

Comments

[Юрий Лобанов]

Для комментариев есть комментарии. Что значит не подходит к Вашему случаю? Вы постарайтесь осознать одну простую истину, что если общепринятое решение не подходит Вам, то явно указывает в 90% случаев, что Вы что-то делаете не так, и только в оставшихся 10% о том, что Ваша задача уникальна. Поверьте, меню — это не уникальная задача. Предоставьте Вашу разметку. И постарайтесь пояснить, чем Вас не устраивает вариант с this.

[Юрий Лобанов]

Ну, куда пропали?

[Mad-cote]

Скинул

[Mad-cote]

Вариант с this - во первых он всегда берет выбранный класс, т.е.
.head_menu li ul, но не действует на родительский.

Я попробовал сделать, как вы и указали через parent, но в этом случае он просто берет класс ".head_menu .drop" и запиливает его вместо ".head_menu .active"

[Mad-cote]

Также, через CSS - такая фиговинка не работает: ".head_menu li ul:hover .drops_link". Иначе говоря он не может обращаться к своему родителю.