Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] .hover dla 1. elementu danej klasy
Forum PHP.pl > Forum > Po stronie przeglądarki
ir3nicus
Witam mam nastepujacy kod:


  1. <div id="teamBoxes">
  2. <span class="team">
  3. <img class="logo" src="gfx/teamLogo.png" alt="Logo" width="46px" height="46px" /><h2>Ciche Żuczki</h2>
  4. <p><img src="gfx/counts/6.png" /><img src="gfx/counts/7.png" /><img src="gfx/counts/9.png" /></p>
  5. <div class="desc"><b>meczy</b><br />12 zawodników</div>
  6. </span>
  7. <span class="team">
  8. <img class="logo" src="gfx/teamLogo.png" alt="Logo" width="46px" height="46px" /><h2>Kowale</h2>
  9. <p><img src="gfx/counts/6.png" /><img src="gfx/counts/7.png" /><img src="gfx/counts/9.png" /></p>
  10. <div class="desc"><b>meczy</b><br />12 zawodników</div>
  11. </span>
  12. <span class="team">
  13. <img class="logo" src="gfx/teamLogo.png" alt="Logo" width="46px" height="46px" /><h2>Dzikie Bawoły </h2>
  14. <p><img src="gfx/counts/6.png" /><img src="gfx/counts/7.png" /><img src="gfx/counts/9.png" /></p>
  15. <div class="desc"><b>meczy</b><br />12 zawodników</div>
  16. </span>
  17. <span class="team">
  18. <img class="logo" src="gfx/teamLogo.png" alt="Logo" width="46px" height="46px" /><h2>Colki</h2>
  19. <p><img src="gfx/counts/6.png" /><img src="gfx/counts/7.png" /><img src="gfx/counts/9.png" /></p>
  20. <div class="desc"><b>meczy</b><br />12 zawodników</div>
  21. </span>
  22.  


  1. css
  2.  
  3. span.team:hover { background: url('../gfx/zagrajBtn.png') no-repeat; cursor: pointer; }
  4.  


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:
  1. $('.team').hover(function () {
  2. $('p').hide();
  3. $('.desc').hide();
  4. $('h2').css('color', '#fff');
  5. });


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
#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:

  1. $('span.team:hover').find('p').hide();
  2. $('span.team:hover').find('.desc').hide();
  3. $('span.team:hover').find('h2').css('color', '#fff');
  4.  


jakaś sugestia?
kamil4u
W hover:
Kod
$(this).find('p').hide();


Jak nie działa pokaż demo tu: http://jsfiddle.net/
ir3nicus
  1. $('.team').hover(function () {
  2. $(this).find('p').hide();
  3. $(this).find('.desc').hide();
  4. $(this).find('h2').css('color', '#fff');
  5. });


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:

  1. $('.team').mouseover(function () {
  2. $(this).find('p').hide();
  3. $(this).find('.desc').hide();
  4. $(this).find('h2').css('color', '#fff');
  5. });
  6.  
  7. $('.team').mouseout(function () {
  8. $(this).find('p').show();
  9. $(this).find('.desc').show();
  10. $(this).find('h2').css('color', '#D52D2D');
  11. });
  12.  
Kartofelek
  1. $('.team').hover(
  2. function () {
  3. var $t = $(this);
  4. $t.find('p, .desc').hide();
  5. $t.find('h2').css('color', '#fff');
  6. },
  7. function () {
  8. var $t = $(this);
  9. $t.find('p, .desc').show();
  10. $t.find('h2').css('color', '#D52D2D');
  11. }
  12. );


+ oczywiście lepiej nadawac klasę niż kolor
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.