finestra a comparsa laterale a: hover

[yhtr]

Ciao,
è possibile realizzare una finestra a comparsa laterale, esempio larga 500px; con img in background, senza impiegare ul e li ?

[yhtr]

nessuno spunto?

[yhtr]

con questo codice:

div#main a {
position: relative;
display:hidden;
}
div#main a:hover span {
display: block;
position: absolute;
top: 500; left: 400px;
width: 500px;
padding: 5px;
border-style: solid;
border-color: white;
border-width: 5px;
color: white;
background: #720E0E;
text-align: center;
font: bold 12pt Arial;
z-index: 2;
}



questo è il link <span>questo il contenuto</span>



io vorrei vedere 'questo è il contenuto' solo quando si esegue a:hover, ovvero quando si passa col mouse su 'questo è il link'

invece 'questo è il contenuto' è sempre presente...

[yhtr]

davvero nessuno di questo forum ha una dritta?!!!

[Mich_]

Hai il vizio di rinfrescare il thread dopo poco tempo che hai postato, e questo non aiuta ad avere risposte.
In questo forum le risposte arrivano in media dopo qualche ora, quindi prima di fare "up" aspetta almeno una mezza giornata lavorativa.

Nota che per inserire i codci, ci sono gli appositi tag VB, che puoi inserire mediante il tag # sopra l'area di inserimento testo.

Attento che il tuo codice ha degli errori di sintassi: controlla sempre la tua sintassi nei manuali e/o usa i validatori (sono molto piu` bravi del forum a trovare gli errori di sintassi, ed hai la risposta in tempo reale)

Prova con questo CSS:

#main a {
  ...   /* ma non usare i posizionamenti, se non sono proprio necessari */
}
#main a span {
  display: none;
}
#main a:hover span {
display: inline;
}

[yhtr]

Chiedo scusa, non succederà più.
parola.
a presto.

[yhtr]

Semmai dovesse tornare utile a qualcuno:

avevo la necessità creare una finestra a comparsa usando solo i css (preferisco) al passaggio del mouse, cercando di adattarla (in quanto position: absolute per necessità) alle diverse risoluzioni video, che ho confrontato con questo simulatore:

http://viewlike.us/

codice css:

div.box span{
position: relative;
display:none;
}
div.box a span{
position: relative;
display:none;
}
div.box a:hover span {
display: block;
position: absolute;
top: 50px;
left: auto;
width: 500px;
padding: 5px;
z-index: 2;
}

a presto.