Простой tool tip на JQuery

[BassEast]

Привет.

Не могу реализовать такую, простую штуку на JQuery (если это по теме), как на картинке:

Есть такой html:

<div class="block">
<a href="">ссылка</a>

текст текст текст... различные дивы <div>текст</div>

<div class="needToShow">этот блок нужно показать</div>

</div>

JQuery:

$(document).ready(function(){

	$(".block a").hover(function() {
		$(".block").next("div .needToShow").show("fast");
	}, function() {
		$(".block").next("div .needToShow").hide("fast");
	});

});

Так не работает. Я не знаю, как добраться до класса needToShow, подскажите плиз, кто знает.

[sigma77]

BassEast

	  $(document).ready(function()
		{
		  $('.block a').hover(
			function(){
			  $('.needToShow').show();
			},
			function(){
			  $('.needToShow').hide();
			});
		});

[BassEast]

BassEast

	  $(document).ready(function()
		{
		  $('.block a').hover(
			function(){
			  $('.needToShow').show();
			},
			function(){
			  $('.needToShow').hide();
			});
		});

В том то и дело, что мне нужно, чтобы по hover показывался блок в этом диве, а не все блоки на странице.

[sigma77]

Ладно, тогда так

	  $(document).ready(function()
		{
		  $('.block a').hover(
			function(){
			  $(this).siblings('.needToShow').show();
			},
			function(){
			  $(this).siblings('.needToShow').hide();
			});
		});

Upd.

Можно также перенести .needToShow непосредственно под саму ссылку. Тогда можно будет использовать $(this).next

Edited June 24, 2010 by sigma77

[s0rr0w]

Вот оно, поколение JQ...

У вас есть структура DOM. Есть нода-активатор, есть скрытый блок.

При нажатии на ноду активатор нужно подняться к какому-то паренту, который содержит и ноду-активатор, и скрытый блок. Этим парентом является элемент с классом block.

В этом паренте запускаем функцию, которая найдет скрытый блок внутри и активирует его.

[sigma77]

s0rr0w,

Ты имеешь ввиду сделать это на чистом JavaScript?

[s0rr0w]

s0rr0w,

Ты имеешь ввиду сделать это на чистом JavaScript?

Это можно и на JQ сделать. Инструмент не суть важен.

Мышление важнее.

http://api.jquery.com/parent/

		  $('.block a').hover(
			function(){
			  $(this).parent('.block').find('.needToShow').show();
			},
			function(){
			  $(this).parent('.block').find('.needToShow').hide();
			});

Код не проверял, думаю сам доделаешь

[BassEast]

Это можно и на JQ сделать. Инструмент не суть важен.

Мышление важнее.

http://api.jquery.com/parent/

		  $('.block a').hover(
			function(){
			  $(this).parent('.block').find('.needToShow').show();
			},
			function(){
			  $(this).parent('.block').find('.needToShow').hide();
			});

Код не проверял, думаю сам доделаешь

я разобрался, спасибо.

правда в моём случае мне помог .children()

[s0rr0w]

правда в моём случае мне помог .children()

Если ты перенесешь свой тултип куда-то глубже по дереву, то код с children работать не будет.