stato hover e visibilità di un div

[jackweb]

Salve a tutti...
allo stato hover su un div vorrei che me ne comparisse un secondo e che all'OnMouseOut questo scomparisse....dovrò inserirci una breve descrizione di una immagine.
Potreste darmi una dritta?
Non sapendo come si realizza vi chiedo un aiuto, specificandomi magari se si usa necessariamente javascript oppure no...ma io credo di sì.
Grazie..

[oronze]

non so se ho capito bene...cmq mi sa che avevo letto un articolo che si poteva solo con css (ma non ricordo dove)
con js crei il div con id ="descr" e lo lasci vuoto poi sul div che vuoi descrivere
<div .... onmouseover="document.getElementById("descr").inne rHTML='Descrizione'"
onmouseover="document.getElementById("descr").inne rHTML=''">
era questo o non ho capito nulla io?
oppure se vuoi farlo scomparire
onmouseover="document.getElementById("descr").styl e.display='none'"
onmouseover="document.getElementById("descr").disp lay='block'"

[Mich_]

Breve esempio (con solo CSS):

<a class="imm_descr" href="#" onclick="return false;">
  [img]...[/img]
  <span class="descriz">Qui la descrizione dell'immagine</span>
</a>

CSS:
a.imm_descr {
  display: block;
  float: left;   /* se si vuole che la descr si affianchi */
  ...
}
a.imm_descr span {
  display: none;
}
a.imm_descr:hover span {    /* opzione 1 - blocco sovrapposto */
  display: block;
  position: absolute;  /* oppure relative; */
  z-index: 10;   /* maggiore degli altri, se presenti */
  /* ... eventuali posizionamenti */
}
a.imm_descr:hover span {    /* opzione 2 - blocco si fa spazio tra altri */
  display: block;
  float: left;   /* se si e` usato il float nel tag <a> */
}
/* se si e` usato il float, occorre un clear da qualche parte */

Questo e` uno schema di massima: occorrera` aggiungere altri attributi CSS a seconda del risultato voluto.

[jackweb]

Grazie ragazzi.
Proprio ciò che cercavo...
Spero che questo esempio postato da mich sia utile anche ad altri utenti perchè mi sembra veramente perfetto.
Ora lo testerò.

Grazie

[jackweb]

L'ho provato e funziona bene ma c'è un piccolo problema...allo stato hover in IE6 non si visualizza nulla.
E' un problema del codice da me riadattato oppure è proprio un non funzionamento di questa tecnica su IE6???


Sarebbe bello vedere una vecchia pillola su tutte queste tecniche...magari esiste già e mi son perso qualcosa?!?

Grazie Mich_

[gengix]

Guarda questo post anche se si parla di menu, il problema dovrebbe essere lo stesso.

http://forum.html.it/forum/showthrea...readid=1256518

Hai 2 soluzioni proposte, sicuramente quella di fcaldera è quella meno laboriosa.

[jackweb]

Ho visto il link che mi hai passato...ma non mi funzia.
posto il codice:

HTML

<div id="contenitore_freccia_des" class="imm_descr" href="#" onclick="return false;"> <span class="descriz">
 Nextwork</span></div> 

CSS

.contenitore_freccia_des span{ font-size: 10px; font-weight: bold;    } 
.imm_descr {   display: block;   text-decoration:underline;   color: black;    } 
.imm_descr span {   display: none;   font-size: 10px; font-weight: bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:  black;  } 
  .imm_descr:hover span {        display: block;     position: relative;  z-index: 10;  margin-top: 80px;     margin-left: -7px;     padding: 0px;     border:0px; } 
 #contenitore_opera_dettaglio{     width: 450px;     font-family: Arial, Helvetica, sans-serif;     font-size: 10px;     line-height: 14px;     position: relative;     margin-top: 6px;  } 
 #contenitore_titolo_opera_dettaglio{     width: 500px;     font-family: Arial, Helvetica, sans-serif;     font-size: 11px;     position: relative;     font-weight: bold;     color: #000000 } 

Se potete darmi una mano...Grazie

PS: In IE non compare la classica mano del link....come risolvere?

[gengix]

Non farti male da solo, hai diversi esempi di codice che ti sono stati postati.

Semanticamente è più corretta la soluzione consigliata da Mitch dove viene utilizzato un link che contiene uno span invece di sfruttare lo stato hover su un div come hai fatto te.

Inoltre ci sono diverse imprecisioni nel tuo css, come quella di dare la proprietà display:block ad un div, essendo quest'ultimo già un elemento di blocco.

Dare delle proprietà ad un elemento richiamandolo con la classe e con l'id può essere utile in certi casi, ma in un caso così semplice lo trovo abbastanza laborioso e scomodo.

Ti faccio velocemente un esempio di codice:

	<a title="link" class="imm_descr" href="#">
		<span class="descriz">Questo è lo span</span>
	</a>

.imm_descr {
display:block;
width:100px;/*esempio*/
height:50px;/*esempio*/
background:red;/*esempio*/
position:relative;
....
....
}
.imm_descr span {
display:none;
....
....
}
a.imm_descr:hover span {
display:block;
width:150px;/*esempio*/
background:yellow;/*esempio*/
position: absolute;
top:80px;/*esempio*/
left:80px;/*esempio*/
....
....
}
.imm_descr:hover {
 direction:ltr;
}
...
...

Questo è solo un esempio, adattalo alle tue esigenze o prendi spunto dagli altri che ti sono già stati suggeriti.