Forum PHP.pl

mam 2 linki (Linki 1, Link 2) jeden po drugim, po najechaniu myszką na którys z nich wyskakuje div z opisem.
Link 2 jest zaraz pod Link 1 i wyskakujący div z opisem dla Link 1 powinien przysłonić Link 2 i generalnie to robi tło oblewa Link 2 ale sam tekst Link 2 przebija.

[HTML] pobierz, plaintext 
<div style="position:relative;">
<a href="#" onmouseover="document.getElementById('1').style.display='block'" onmouseout="document.getElementById('1').style.display='none'">Link 1</a>
<div id="1" style="position:absolute; top:20;left:0;width:200px;height:200px;background-color:yellow;display:none;z-index:2">Opis dla1</div> 
</div> 
<br>
<br>
<br> 
<div style="position:relative;">
<a href="#" onmouseover="document.getElementById('2').style.display='block'" onmouseout="document.getElementById('2').style.display='none'">Link 2</a>
<div id="2" style="position:absolute; top:20;left:0;width:200px;height:200px;background-color:yellow;display:none">Opis dla 2</div> 
</div>
[HTML] pobierz, plaintext 

Dałem więc do diva z Link 1 "z-index: 2", pomaga jedynie w firefoxie, a IE7 nadal sie opiera.
Pomaga jedynie nadanie wyższego indexu dla div`a oplatającego zarówno link jak i div z opisem.

Czy tak powinno być? Która przeglądarka reaguje prawidłowo, czy może robie coś źle?

Polecacie jakiś konkretny sposób na wykonanie własnych "chmurek"?
Chodzi mi o to, czy budujecie jednego diva, następnie odczytujecie miejsce gdzie jest myszka i tam go wyświetlacie z odpowiednią zawartością? Czy może pod każdym linkiem ukrywanie diva, który ukazuje się po najechaniu myszką nad link czy obrazek...?

Ten post edytował windman 15.02.2008, 21:01:23

Sprawdź to:

[HTML] pobierz, plaintext 
<div style="position:relative;z-index:2">
<a href="#" onmouseover="document.getElementById('1').style.display='block'" onmouseout="document.getElementById('1').style.display='none'">Link 1</a>
<div id="1" style="position:absolute; top:20;left:0;width:200px;height:200px;background-color:yellow;display:none;">Opis dla1</div>
</div>
 
 
<br>
<br>
<br>
<div style="position:relative;z-index:1">
<a href="#" onmouseover="document.getElementById('2').style.display='block'" onmouseout="document.getElementById('2').style.display='none'">Link 2</a>
<div id="2" style="position:absolute; top:20;left:0;width:200px;height:200px;background-color:yellow;display:none">Opis dla 2</div>
</div>
[HTML] pobierz, plaintext 

Niestety IE 7 ma (bynajmniej tak wnioskuję) to do siebie, że z-index działa tylko na elementach będących na tej samej wysokości w drzewie DOM.

IE z-index bug

Ten post edytował Kowalikus 15.02.2008, 22:36:53

to co zaproponowałeś działa, napisałem że pomaga jedynie zastosowanie z-index dla diva oplatającego.
Dowiędziałem się jednak, że to błąd IE (jakbyż inaczej).

Dzięki.