Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] zmiana atrybutu rodzica
Forum PHP.pl > Forum > Przedszkole
XP'ek
Witam,

mam takie rozwiązanie

<div id="rodzic">
<div class="dziecko">
<a href="#">#</a>
</div>
</div>


w jaki sposób mogę po najechaniu na link wysłać zmianę tła dla div'a z id
rocktech.pl
Witam.

Przy użyciu selektorów tego nie zrobisz.
Użyj JavaScriptu.
Sephirus
AFAIK nie ma pseudoklasy ani selektora pozwalającego na działanie na rodzicu z poziomu dziecka. Najlepiej posłużyć się tutaj jednak JavaScriptem. Zresztą - taką sytuację można zawsze jakoś obejść.

Najprostrza metoda JS polegała by na przygotowaniu DIVowi rodzic dodatkowej klasy "po najechaniu" na przykład #rodzic.hover, wówczas wystarczy dać elementowi A wewnątrz tego diva odpowiednie zdarzenia JS:

  1. #rodzic { /* deklaracja styli bez najechania */
  2. (...)
  3. }
  4.  
  5. #rodzic.hover { /* deklaracja styli po najechaniu */
  6. (...)
  7. }


[JAVASCRIPT] pobierz, plaintext
  1. var a = document.getElementById('rodzic').getElementsByTagName('a')[0];
  2.  
  3. a.onmouseover = function (event) {this.parentNode.parentNode.className = 'hover';}
  4. a.onmouseout = function (event) {this.parentNode.parentNode.className = '';}
[JAVASCRIPT] pobierz, plaintext


Oczywiście jest to przykład dla twojego kodu HTML wink.gif
XP'ek
tak tylko właśnie tutaj chodzi o to że classa dziecko ma zawierać 6 linków i każdy link ma inny bg dla rodzica gdy on jest :hover lub po prostu aktywny wink.gif
Sephirus
Też da się zrobić smile.gif Wrzuć cały kod tego to Ci to opiszę wink.gif

EDIT:

jeśli te linki są po kolei w tym divie:

  1. <div id="rodzic">
  2. <div class="dziecko">
  3. <a ... >(...)</a>
  4. <a ... >(...)</a>
  5. <a ... >(...)</a>
  6. <a ... >(...)</a>
  7. <a ... >(...)</a>
  8. <a ... >(...)</a>
  9. </div>
  10. </div>


To można to łatwo cyknąć tak:

Robisz tak smile.gif

[JAVASCRIPT] pobierz, plaintext
  1.  
  2. var rodzicBg = new Array('plik1.png','plik2.png','plik3.png','plik4.png','plik5.png','plik6.png');
  3. var defaultRodzicBg = 'plik0.png';
  4.  
  5. var aList = document.getElementById('rodzic').getElementsByTagName('a');
  6.  
  7. for(var i = 0; i < aList.length; i++)
  8. {
  9. var a = aList[i];
  10.  
  11. a.rodzicBgIndex = i;
  12. a.onmouseover = function (event) {this.parentNode.parentNode.style.backgroundImage = 'url(' + rodzicBg[this.rodzicBgIndex] + ')';}
  13. a.onmouseout = function (event) {this.parentNode.parentNode.style.backgroundImage = 'url(' + defaultRodzicBg + ')';}
  14. }
[JAVASCRIPT] pobierz, plaintext
XP'ek
  1. <div id="belka">
  2. <div class="belka-menu">
  3. <a class="activ1" href="#">#</a>
  4. <a class="activ2" href="#">#</a>
  5. <a class="activ3" href="#">#</a>
  6. <a class="activ4" href="#">#</a>
  7. <a class="activ5" href="#">#</a>
  8. <a class="activ6" href="#">#</a>
  9. </div>
  10. <div class="belka-masz">Masz pytanie? <strong style="color:#da251d;">Zadzwoń</strong></div>
  11. </div>



chodzi o to że dla belki jest 1px pasek na górze który idzie przez całą długość rodzica a jego kolor jest zmienny dla każdego linka
Sephirus
No to ok wink.gif zastosuj kodzik z mojego poprzedniego postu - zmień rodzic na belka i jazda wink.gif
XP'ek
a jak w twoim kodzie mogę odnieść się typowo do danego A z classą bo js za bardzo nie znam...
Sephirus
Nie do końca rozumiem co chcesz zrobić? Napisz konkretnie co cchesz uzyskać wink.gif
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.