Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   mouseout на вложенном элементе (https://javascript.ru/forum/jquery/16843-mouseout-na-vlozhennom-ehlemente.html)

Marv 25.04.2011 11:35

mouseout на вложенном элементе
 
Осваиваю jQuerry. Начал вроде бы с простого меню с fadein/fadeout эффектом. При наведении на ссылку верхнего уровня появляется div вложенного меню. И соответственно при mouseout на этом div'е, он исчезает.
Проблема заключается в том, что mouseout срабатывает и при переходе от div'а к пунктам списка-потомка. То есть div id="par1_ch" появляется, а затем, когда я навожу курсор на пункты вложенного в него меню, он снова исчезает. Что я сделал не так?
$(document).ready(function () {
	$("a.lv1.parent").mouseover(function () {
		$('#' + this.id + '_ch').fadeIn('fast');
	});
	$("div.submenu").mouseout(function () {
		$(this).fadeOut('fast');
	});
});

<ul>
	<li>
		<a class="lv1 parent" id="par1" href="/">aaaaaaaaaaa</a>
		<div id="par1_ch" class="submenu">
			<ul>
				<li><a href="/">bbbbbbbbbbb</a></li>
				<li><a href="/">bbbbbbbbbbb</a></li>
			</ul>
		</div>
	</li>
	<li><a class="lv1" href="/">aaaaaaaaaaa</a></li>
</ul>

Matre 25.04.2011 13:51

$(document).ready(function () {
	$("a.lv1.parent").mouseover(function () {
		$(this).next("div.submenu").fadeIn("fast");
	});
	$("div.submenu").mouseout(function (event) {
		if ( $(event.relatedTarget).closest("div.submenu").length !== 0 )
			return;
		$(this).fadeOut('fast');
	});
});

Marv 25.04.2011 14:11

Спасибо огромное, буквально за полчаса до вашего отвта додумался до closest. Но у вас намного изящнее)

Marv 05.05.2011 10:33

И еще такой вопрос: если несколько раз быстро навести курсор, то fadein и fadeout продолжают выпоняться несколько раз подряд. Как можно прервать анимацию при новом срабатывании?


Часовой пояс GMT +3, время: 02:03.