Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML]podswietlanie kilku div jednoczesnie
Forum PHP.pl > Forum > Przedszkole
-lucas666-
mam problem, ktory wydaje sie dosc prosy, ale nie moge nigdzie znalezc rozwiazania...

mam przykladowo kilka div'ow o rownych klasach. Jak zrobic, aby przy najechaniu na ktorykolwiek podswietlaly sie wszystkie?

  1. <div class="jeden"></div>
  2. <div class="dwa"></div>
  3. <div class="trzy"></div>



Jesli zrobie tak:
.jeden:hover {
...
}

podswietli sie tylko jeden...

Da rade to zrobic samym CSS, czy trzeba uzyc JavaScript?

Z gory dzieki za odpowiedz
Dapi
Samym CSS nie da rady.
Najłatwiej funkcje napisać w JS i wywoływać przy każdym najechaniu.
JustHuman4
A według mnie dałoby się zrobić to w css. Tylko rozwiń jakoś to pytanie bo tego nie widzęwink.gif
Necsord
Jeżeli elementy są obok siebie przylegające, to możesz dać kontener grupujący je i na niego dac :hover'a. W innym przypadku samym CSS'em nie można tego osiągnąć.
-lucas666-
chodzi mi o to, ze jak najade np. na div "jeden" i wszytskie trzy zmieniaja np. background-image, to samo jak najade na "dwa" i "trzy".
Gość
Cytat(Necsord @ 24.03.2012, 13:25:41 ) *
Jeżeli elementy są obok siebie przylegające, to możesz dać kontener grupujący je i na niego dac :hover'a. W innym przypadku samym CSS'em nie można tego osiągnąć.

ale jak mam odstepy miedzy nimi, to w przerwach bedzie przybieralo kolor podswietlenia?
crocodillo
Tak jak Nescord napisał.

np:
  1. .t1:hover div {background-color:#ff0;}
  2. .t2 { background-color:#faa}
  3. .t3 { background-color:#afa}
  4. .t4 { background-color:#aaf}
  5. .t4, .t2, .t3 {
  6. padding:20px;
  7. float:left;
  8. width:20%;
  9. }
  10. <div class="t1">
  11. <div class="t2">
  12. 1111111
  13. </div>
  14. <div class="t3">
  15. 2222222
  16. </div>
  17. <div class="t4">
  18. 3333333
  19. </div>
  20. </div>


Inaczej trzeba za pomocą js
GoOx
a nie lepiej zorbić tak?

  1. #wszystkie :hover {
  2. coś tam
  3. }
  4. $wszystkie .jeden {}
  5. #wszystkie .dwa {}
  6. #wszytskie .trzy {}
crocodillo
Cytat(Gość @ 24.03.2012, 14:30:00 ) *
ale jak mam odstepy miedzy nimi, to w przerwach bedzie przybieralo kolor podswietlenia?


Masz tu przykład z przerwami:

  1. .t1 {height:0px;}
  2. .t1:hover div {background-color:#ff0;}
  3. .t2 { background-color:#faa}
  4. .t3 { background-color:#afa}
  5. .t4 { background-color:#aaf}
  6. .t4, .t2, .t3 {
  7. padding:20px;
  8. float:left;
  9. width:20%;
  10. margin:20px;
  11. }
  12. <div class="t1">
  13. <div class="t2">
  14. 1111111
  15. </div>
  16. <div class="t3">
  17. 2222222
  18. </div>
  19. <div class="t4">
  20. 3333333
  21. </div>
  22. </div>
-lucas666-
Cytat(crocodillo @ 24.03.2012, 13:33:11 ) *
Masz tu przykład z przerwami:

  1. .t1 {height:0px;}
  2. .t1:hover div {background-color:#ff0;}
  3. .t2 { background-color:#faa}
  4. .t3 { background-color:#afa}
  5. .t4 { background-color:#aaf}
  6. .t4, .t2, .t3 {
  7. padding:20px;
  8. float:left;
  9. width:20%;
  10. margin:20px;
  11. }
  12. <div class="t1">
  13. <div class="t2">
  14. 1111111
  15. </div>
  16. <div class="t3">
  17. 2222222
  18. </div>
  19. <div class="t4">
  20. 3333333
  21. </div>
  22. </div>




faktycznie dziala!!!
Dzięki wielkie.
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.