Salve a tutti,
sono nuovo di qui e anche del mestiere, quindi abbiate pietà di me..
Gestisco una rivista online dalla grafica e dai contenuti piuttosto semplici, tutto html e css.
Recentemente, in vista del prossimo aggiornamento, ho utilizzato dei tooltip per creare una sorta di effetto "anteprima" da inserire accanto ai titoli degli articoli che compaiono sul sito (linkati direttamente in pdf). Per farlo ho seguito questo articolo http://css.html.it/articoli/leggi/24...tip-con-i-css/ e il risultato mi sembra più che soddisfacente. Ho creato un link-ancora denominato "anteprima" che reagisce in :hover al passaggio del mouse aprendo sotto di sé un elemento <span> contenente un piccolo testo di anteprima.
Ho tuttavia un piccolo problema che vi chiedo di aiutarmi a risolvere: a seguito dell'allontanamento del mouse da "anteprima" il testo sottostante (il titolo dell'articolo successivo) risale più o meno all'altezza precedente, ma aggiungendo una spaziatura che precedentemente non c'era. Aggiungo che la lista dei titoli si trova in una tabella che ho utilizzato per tenerli su un fianco della pagina.
Questo è il CSS dell'elemento <span>, chiamato "container"
a span { display:none;
width: 0px;
height: 0px;
}
a:hover span.container {
display:block;
position:relative;
bottom 0px;
left: 0px;
top:6px;
width: 375px;
height: 190px;
padding: 7px;
vertical-align: center;
border: none;
}
a:visited span.container {
display:block;
top: 0px;
padding: o px;
border: none;
max-width: 0px;
max-height: 0px;
}
Rispondi quotando
