[jquery] .hover dla 1. elementu danej klasy Opcje

[ir3nicus]

Witam mam nastepujacy kod:

[HTML] pobierz, plaintext 
				<div id="teamBoxes">
					<span class="team">
						<img class="logo" src="gfx/teamLogo.png" alt="Logo" width="46px" height="46px" /><h2>Ciche Żuczki</h2>
						<p><img src="gfx/counts/6.png" /><img src="gfx/counts/7.png" /><img src="gfx/counts/9.png" /></p>
						<div class="desc"><b>meczy</b><br />12 zawodników</div>
					</span>
					<span class="team">
						<img class="logo" src="gfx/teamLogo.png" alt="Logo" width="46px" height="46px" /><h2>Kowale</h2>
						<p><img src="gfx/counts/6.png" /><img src="gfx/counts/7.png" /><img src="gfx/counts/9.png" /></p>
						<div class="desc"><b>meczy</b><br />12 zawodników</div>
					</span>
					<span class="team">
						<img class="logo" src="gfx/teamLogo.png" alt="Logo" width="46px" height="46px" /><h2>Dzikie Bawoły </h2>
						<p><img src="gfx/counts/6.png" /><img src="gfx/counts/7.png" /><img src="gfx/counts/9.png" /></p>
						<div class="desc"><b>meczy</b><br />12 zawodników</div>
					</span>
							<span class="team">
						<img class="logo" src="gfx/teamLogo.png" alt="Logo" width="46px" height="46px" /><h2>Colki</h2>
						<p><img src="gfx/counts/6.png" /><img src="gfx/counts/7.png" /><img src="gfx/counts/9.png" /></p>
						<div class="desc"><b>meczy</b><br />12 zawodników</div>
					</span>
 
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
css
 
span.team:hover { background: url('../gfx/zagrajBtn.png') no-repeat; cursor: pointer;  }
 
[HTML] pobierz, plaintext 

Chciałbym, żeby po najechaniu na każego spana o klasie 'team', podane selektory zniknęły ale tylko w tym spanie. O to mój jquery code:

[HTML] pobierz, plaintext 
	$('.team').hover(function () { 
	$('p').hide();
	$('.desc').hide();
	$('h2').css('color', '#fff');
	});
[HTML] pobierz, plaintext 

Nie wiem jak zrobić żeby tylko w najechanym spanie a nie we wszystkich był efekt. Gdyby to był tylko jeden element albo tylko hide to uzyl bym "this" ale tutaj zmieniam kolor także dla h2. czy ktoś podpowie jak dostać się do h2, p ale tylko tego konkretnego spana nie wszystkich o tej klasie? Css dzala tak jak powinien

Ten post edytował ir3nicus 28.08.2011, 11:01:15

[#luq]

Myślę że find() pomoże w problemie jeśli dobrze zrozumiałem.

[ir3nicus]

hmm, niby używam ale nie chce działać, brak rezultatów:

[HTML] pobierz, plaintext 
	$('span.team:hover').find('p').hide();
	$('span.team:hover').find('.desc').hide();
	$('span.team:hover').find('h2').css('color', '#fff');
 
[HTML] pobierz, plaintext 

jakaś sugestia?

Ten post edytował ir3nicus 28.08.2011, 17:00:44

[kamil4u]

W hover:

Kod

$(this).find('p').hide();

Jak nie działa pokaż demo tu: http://jsfiddle.net/

[ir3nicus]

[HTML] pobierz, plaintext 
	$('.team').hover(function () { 
	$(this).find('p').hide();
	$(this).find('.desc').hide();
	$(this).find('h2').css('color', '#fff');
	});
[HTML] pobierz, plaintext 

jest ok tylko muszę jeszcze obsłużyc to inaczej bo po najechaniu na kolejne spany, te ktore juz byly aktywne zostaja ostylowane czyli musze dac mouseover i mouseout efekty jak napisze to wkleje tutaj , dzieki za pomoc
Finalny KOD:

[HTML] pobierz, plaintext 
	$('.team').mouseover(function () { 
	$(this).find('p').hide();
	$(this).find('.desc').hide();
	$(this).find('h2').css('color', '#fff');
	});
 
	$('.team').mouseout(function () { 
	$(this).find('p').show();
	$(this).find('.desc').show();
	$(this).find('h2').css('color', '#D52D2D');
	});
 
[HTML] pobierz, plaintext 

Ten post edytował ir3nicus 28.08.2011, 21:36:42

[Kartofelek]

[HTML] pobierz, plaintext 
$('.team').hover(
   function () {
     var $t = $(this);
     $t.find('p, .desc').hide();
     $t.find('h2').css('color', '#fff');
   },
   function () {
     var $t = $(this);
     $t.find('p, .desc').show();
     $t.find('h2').css('color', '#D52D2D');
   }
);
[HTML] pobierz, plaintext 

+ oczywiście lepiej nadawac klasę niż kolor