Originariamente inviato da Vincent.Zeno
se controlli il codice dell'esempio da te postato ne capirai facilmente il funzionamento,
niente ti impedisce di aggiungere altri elementi allo stesso modo
Ho analizzato il codice dell'esempio e sono risalito al principio di funzionamento:
codice:
<html>
<head>
<style type="text/css">
#rollover {
font: 12px arial;
cursor: pointer;
}
#rollover li a div {
display: none;
color: #f00;
}
#rollover li a:hover div {
display: block;
position: absolute;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div id="rollover">
<ul>[*]
<a>Mostra il contenuto del primo div
<div>Questo è il contenuto del primo div</div>
</a>
[*]
<a>Mostra il contenuto del secondo div
<div>Questo è il contenuto del secondo div</div>
</a>
[/list]
</div>
<div id="dest"></div>
</body>
</html>
Ma mi chiedo: tutto qua?
Il solo posizionamento che si può dare ai layer da visualizzare è assoluto?
Niente di statico? (Lo preferisco perché pù facile da gestire nei layout fluidi).
Se volessi inserirlo all'interno del layer "dest" esiste qualche sistema per farlo con il contenuto generato, con gli pseudo elementi :before e :after?
Qualcosa che assomigli all'innerHTML di JavaScript, che ne so... Scrivo na cavolata solo per farmi capire, perdonate la selvaticità del codice:
#rollover li a:hover div {
#dest :before = #rollover li a div;
}
...cioè prendi quel contenuto e vallo a mettere lì dentro?