aprire un div contenente testo da rollover

[konart]

Voglio creare questo effetto (vedi allegato).

al passaggio del mouse sopra la scritta "Informativa Privacy" (Fig.1) deve aprirsi un div con sfondo bianco opacità 90% contenente del testo (Fig.2).

ovviamente al rollout questo deve sparire.


non so come procedere.

[Mich_]

Non e` un problema.
Il <div> deve esistere nella pagina, deve essere interno al blocco che lo rende visibile, deve avere posizionamento assoluto e deve avere
display: none; /* oppure margin-left: -1000px; */

Il blocco che lo rende visibile deve quindi essere un link (altrimenti in IE non funziona) ed avere:

a.switch {
  display: block; /* necessario perche` contiene dei blocchi */
  ...
}
a.switch:link p {
  display: none; /* oppure margin-left: -1000px; */
  position absolute;
  left: ...; top: ...;
  ...
}
a.switch:hover p {
  display: block; /* oppure margin-left: 100px; */
}

Il codice HTML:
<a class="switch">Informativa Privacy


Qui l'informativa</p></a>

[ilario83]

potresti anche vedere questo:

http://javascript.html.it/script/vedi/508/popit-menu/

[konart]

-allora io ho creato un file di nome div.css che richiamo all'interno della mia pag HTML con questo codice:

<link rel="stylesheet" type="text/css" href="div.css">

-all'inteno del css c'è questo:

a.switch {
display: block;
}
a.switch:link p {
display: none;
position absolute;
left: 150; top: 150;
}
a.switch:hover p {
display: block;
}


-e nella mia pagina HTML scrivo questo:

<a class="switch">Informativa Privacy

Qui l'informativa</p></a>


però non funzia cosa mi sono dimanticato
cioè da qualche parte immagino ci vada anche un DIV con la sua classe ma non so dove vada e che classe o id associargli.

[ilario83]

puoi provare anche questo:

rollover disgiunto con i css

[Mich_]

Certo che ci vuole un <div> o comunque un contenitore del blocco creato dall'<a>.
La classe e` gia` definita bnell'<a>, e quindi non serve altro, ma la soluzione dettagliata dipende da cosa c'e` attorno e dal linguaggio usato (DOCTYPE).

Inoltre i numeri senza unita` di misura nei CSS non portano a risultati. I tuoi 150 devono diventare 150px (immagino).
Forse devi anche dare delle dimensioni al blocco con position: absolute (width e height).



PS: tra position e absolute manca un duepunti (errore di sintassi).

[konart]

l'esempio di Mich_ va benissimo, mi sembra il meno complesso, mi devo essere arenato proprio in una cavolata.
non riuscite a postarmi il codice completo funzionante.. Mich_ è stato bravissimo e mi ha piegato cosa significano le varie funzioni ma ho bisogno dello stesso esempio in versione pratica. E' la prima volta che faccio una cosa del genere.

[Mich_]

Sovrapposizione di post.
Rivedi il codice con gli erorri segnalati, eventualmente controlla con i validatori.

E posta il codice completo (oppure un link alla pagina).

PS: posta il codice all'interno dei tag segnalti da # o PHP, altrimenti e` difficile da capire