[CSS] zmiana atrybutu rodzica Opcje

[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

Ten post edytował XP'ek 23.12.2011, 08:34:18

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

[CSS] pobierz, plaintext 
#rodzic { /* deklaracja styli bez najechania */
    (...) 
}
 
#rodzic.hover { /* deklaracja styli po najechaniu */
    (...)
}
[CSS] pobierz, plaintext 

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

Oczywiście jest to przykład dla twojego kodu HTML

[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

[Sephirus]

Też da się zrobić Wrzuć cały kod tego to Ci to opiszę

EDIT:

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

[HTML] pobierz, plaintext 
<div id="rodzic">
<div class="dziecko">
   <a ... >(...)</a>
   <a ... >(...)</a>
   <a ... >(...)</a>
   <a ... >(...)</a>
   <a ... >(...)</a>
   <a ... >(...)</a>
</div>
</div>
[HTML] pobierz, plaintext 

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

Robisz tak

[JAVASCRIPT] pobierz, plaintext 
 
var rodzicBg = new Array('plik1.png','plik2.png','plik3.png','plik4.png','plik5.png','plik6.png');
var defaultRodzicBg = 'plik0.png';
 
var aList = document.getElementById('rodzic').getElementsByTagName('a');
 
for(var i = 0; i < aList.length; i++)
{
     var a = aList[i];
 
     a.rodzicBgIndex = i;
     a.onmouseover = function (event) {this.parentNode.parentNode.style.backgroundImage = 'url(' + rodzicBg[this.rodzicBgIndex] + ')';}
     a.onmouseout = function (event) {this.parentNode.parentNode.style.backgroundImage = 'url(' + defaultRodzicBg  + ')';}
}
[JAVASCRIPT] pobierz, plaintext 

Ten post edytował Sephirus 23.12.2011, 09:05:15

[XP'ek]

[HTML] pobierz, plaintext 
<div id="belka">
	<div class="belka-menu">
    	<a class="activ1" href="#">#</a>
    	<a class="activ2" href="#">#</a>
    	<a class="activ3" href="#">#</a>
    	<a class="activ4" href="#">#</a>
    	<a class="activ5" href="#">#</a>
    	<a class="activ6" href="#">#</a>
    </div>
	<div class="belka-masz">Masz pytanie? <strong style="color:#da251d;">Zadzwoń</strong></div>    
</div>
[HTML] pobierz, plaintext 

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

Ten post edytował XP'ek 23.12.2011, 09:10:05

[Sephirus]

No to ok zastosuj kodzik z mojego poprzedniego postu - zmień rodzic na belka i jazda

[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ć