Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: problem z hover dla kilku takich samych div
Forum PHP.pl > Forum > Po stronie przeglądarki
lol99
Witam
mam problem z poniższym skryptem
działać a zasadzie: najeżdżamy na div #box i pokazuje nam div time

  1. $(document).ready(function() {
  2.  
  3. $("#box").hover(
  4. function () {
  5. $("#box .time").show();
  6.  
  7.  
  8. },
  9. function () {
  10. $("#box .time").hide();
  11. }
  12. );
  13.  
  14. });


działa on tylko dla jednego div'a, a ma dla wszystkich,

  1. <div id="box">
  2. <div class="time"></div>
  3. </div>
  4. <!-- działa tylko na pierwszym div'ie, na reszcie nie reaguje -->
  5.  
  6. <div id="box">
  7. <div class="time"></div>
  8. </div>
  9.  
  10. <div id="box">
  11. <div class="time"></div>
  12. </div>
  13.  
  14. <div id="box">
  15. <div class="time"></div>
  16. </div>
  17.  
  18. <div id="box">
  19. <div class="time"></div>
  20. </div>
  21. ....
  22.  


Damonsson
Bo ID jest unikalne. Tylko dla jednego elementu. Jak dasz CLASS powinno działać, choć nie znam się super na jQuery.
luckyps
Zamien na:
  1. <div class="box">
  2. <div class="time"></div>
  3. </div>

i
  1. $(".box").hover(
  2. function () {
  3. $(this).find('div').show();
  4. },
  5. function () {
  6. $(this).find('div').hide();
  7. }
  8. );

powinno zalatwic sprawe smile.gif
lol99
działa, ale dalej nie tak jak chce.
tzn najadę na pierwszego, i pokazuje sie w wszystkich a ma tylko w tym na który najadę ;
luckyps
Czyli najechanie myszka na jakikolwiek div ktory ma class="box" ma spowodowac, ze pojawic się maja wszystkie divy z class="time" czy tylko ten, ktory jest w aktualnie "najechanym" divie z class="box" questionmark.gif
lol99
tylko ten na który najechaliśmy.
tzn
najeżdżamy na box nr1 pokazuje sie .time w box nr2
najeżdzamy na box nr2 pokazuje sie .time w box nr2
itd...

problem rozwiązany
  1. $(document).ready(function() {
  2.  
  3. $('.box').hover(
  4. function () {
  5. var id = $(this).attr('id');
  6. $('#'+id+' .time').show("slow");
  7. },
  8. function () {
  9. var id = $(this).attr('id');
  10. $('#'+id+' .time').hide("slow");
  11. }
  12. );
  13.  
  14.  
  15. });

  1. <div class="box" id="1">
  2. <div class="time"></div>
  3. </div>
  4. <div class="box" id="2">
  5. <div class="time"></div>
  6. </div>
  7. <div class="box" id="3">
  8. <div class="time"></div>
  9. </div>
  10. itd
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.