Forum PHP.pl > [CSS] Problem z stylem :hover

Tomplus

18.06.2012, 13:19:48

Witam mam problem z warstawami i tabelą:

Zrobiłem prostą rzecz w CSS gdzie po naniesieniu kursora pojawia się treść, styl działa tak jak należy, do momentu gdy na jego drodze nie stanęła tabela.

Tabela która wyświetla listowane dane zasłania część lub całość warstwy span, bawiłem się kolejnością wyświetlania warstw, ale dla tabel to nie dziala i z-index po nic mi się zdaje.

Co mam zrobić aby warstwa hover pojawiła się NAD tabelę <table>, a nie POD nią?

Mam taki styl:

Kod

.tooltip, .tooltip2 {
    position: relative;
}
a.tooltip2 {
    font-size: 0.8em;
}

a.tooltip span, a.tooltip2 span.list {
    display: none;
    text-decoration : none;
    color: #fff;
}
a.tooltip2:hover span.list {
    display: block;
    position: absolute;
    background: olive url(obrazki/tlo.gif);
    z-index:9999;
    text-align: left;
    font-family: verdana;
    letter-spacing: 1px;
    font-size : 1.2em;
    font-variant: small-caps;
    font-style:normal;
    width: 200px;
    height: 250px;
    padding: 4px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

oraz

[HTML] pobierz, plaintext 
<a href='pobierz.html' class='tooltip2'>POBIERZ <span class='list'>DANE<br>TRESC</span></a>
[HTML] pobierz, plaintext

pehaperowiec

18.06.2012, 14:14:43

Cytat(Tomplus @ 18.06.2012, 14:19:48 )

Witam mam problem z warstawami i tabelą:

Zrobiłem prostą rzecz w CSS gdzie po naniesieniu kursora pojawia się treść, styl działa tak jak należy, do momentu gdy na jego drodze nie stanęła tabela.

Tabela która wyświetla listowane dane zasłania część lub całość warstwy span, bawiłem się kolejnością wyświetlania warstw, ale dla tabel to nie dziala i z-index po nic mi się zdaje.

Co mam zrobić aby warstwa hover pojawiła się NAD tabelę <table>, a nie POD nią?

Mam taki styl:

Kod

a.tooltip2:hover span.list {
    display: block;
    position: absolute;
    background: olive url(obrazki/tlo.gif);
    z-index:9999;
    text-align: left;
    font-family: verdana;
    letter-spacing: 1px;
    font-size : 1.2em;
    font-variant: small-caps;
    font-style:normal;
    width: 200px;
    height: 250px;
    padding: 4px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

oraz

[HTML] pobierz, plaintext 
<a href='pobierz.html' class='tooltip2'>POBIERZ <span class='list'>DANE<br>TRESC</span></a>
[HTML] pobierz, plaintext

Wystarczy użyc pozycjonowania absolutnego. Poglądowy przykład:

http://jsfiddle.net/LhdUm/

Tomplus

18.06.2012, 15:30:29

Daje plusa za pomoc. Może nie za to że Twoja pomoc okazała się pomocna, ale za pokazanie dobrego kierunku myślenia