a hover con class su immagine

[abra]

Ciao a tutti avrei bisogno di un aiuto per quanto riguarda il tag A HOVER nel punto
.email {margin-top : 29px;float: right;padding:0}
.email a hover {background-image: url(immagini/email-ov.gif)}

Quello che non capisco è come mai al passaggio del mouse sopra all'icona email.gif non mi mostra email-ov.gif.
Naturalmente una volta capito questo posso farlo anche con le altre due.

/*stile per la grafica*/
html,body{margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding:0}
body{background:#99cc66}

/*stile generico su sopra*/
div#sms{background-image: url(immagini/sfondo_sopra.gif);width: 100%;height: 800;background-repeat: repeat-x}

/*stile per le immagini*/
.sms {margin-top : 0px;float: left}
.email {margin-top : 29px;float: right;padding:0}
.email a hover {background-image: url(immagini/email-ov.gif)}
.smsgratis {margin-top : 29px;float: right;padding:0}
.smspronti {margin-top : 29px;float: right;padding:0}

Questo è il testo html della porzione di include:
<div id="sms">[img]sms-gratis.gif[/img]
[img]sms-pronti.gif[/img]
[img]sms_gratis.gif[/img]
[img]email.gif[/img]
</div>

Grazie mille, voglio capire perchè non funziona.

[fcaldera]

hover è una pseudoclasse e non un tag annidato, quindi cambia

.email a hover {background-image: url(immagini/email-ov.gif)}


in

.email a:hover {background-image: url(immagini/email-ov.gif)}



Ciao

[abra]

ti ringrazio fcaldera ho provveduto a modificare ma tuttavia non mi cambia l'immagine quando ci passa sopra il mouse.
adesso il css è:
/*stile per la grafica*/
html,body{margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding:0}
body{background:#99cc66}

/*stile generico su sopra*/
div#sms{background-image: url(immagini/sfondo_sopra.gif);width: 100%;height: 800;background-repeat: repeat-x}

/*stile per le immagini*/
.sms {margin-top : 0px;float: left}
.email {margin-top : 29px;float: right;padding:0}
.email a:hover {background-image: url(immagini/email-ov.gif)}
.smsgratis {margin-top : 29px;float: right;padding:0}
.smsgratis a:hover {background-image: url(immagini/smsgratis-ov.gif)}
.smspronti {margin-top : 29px;float: right;padding:0}
.smspronti a:hover {background-image: url(immagini/smspronti-ov.gif)}

Ho messo in allegato lo screen della porzione di sito interessata per vedere se puoi aiutarci a capire meglio.
Dove sto sbagliando ancora?

[fcaldera]

Scusa, ho letto male il tuo primo post: il motivo per cui (.email a:hover) non funziona è perchè la classe email si trova dentro il link e non viceversa. Con il codice che hai scritto tu non puoi modificare l'immagine dell'hover

Cambia così:

CSS

#a_email {
  display  : block;
  width    : (larghezza dell'immagine email.gif) px;
  height   : (altezza dell'immagine email.gif) px;
  background : url (immagini/email.gif) no-repeat;
  text-indent  : -9999em;
  overflow   : hidden;
}
#a_email:hover {
  background : url (immagini/email_ov.gif) no-repeat;
}

HTML

<div id="sms">[img]sms-gratis.gif[/img]
[img]sms-pronti.gif[/img]
[img]sms_gratis.gif[/img]
Email
</div>

probabilmente dovrai aggiustare qualcosa nel resto del codice css per evitare che il link all'email erediti qualche proprietà non necessaria

Ciao

[abra]

grazie fcaldera mi hai dato uno spunto su come fare una cosa a cui pensavo da tempo, mettere del testo ,ottimo per i mdr, al posto di un'immagine.
Ora ci lavoro un pò su e approfondisco il fattore overflow : hidden, visto che recentemente i mdr hanno cominciato a leggere i css e non vorrei che lo vedessero di cattivo occhio.
Ti faccio sapere se ho novità a proposito.
Grazie ancora.
Ciao!

[abra]

ho provato ma non mi funziona e non capisco dove sto sbagliando :master:
IL problema è che non mi visualizza niente, non appare l'immagine in background email.gif e
anche se tolgo
text-indent : -9999em;
overflow : hidden
al passaggio del mouse sopra il testo non mostra niente.

Questo è l'attuale css:

/*stile per la grafica*/
html,body{margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding:0}
body{background:#99cc66}

/*stile generico su sopra*/
div#sms{background-image: url(immagini/sfondo_sopra.gif);
background-repeat: repeat-x;
width: 100%
}

/*stile barra superiore*/
#email {
display : block;
width : 101 px;
height : 100 px;
background : url (email.gif) no-repeat;
text-indent : -9999em;
overflow : hidden
}
#email:hover {
background : url (immagini/email_ov.gif) no-repeat;
}

Questo è il codice dell'include interessato:
<div id="sms">
[img]sms-gratis.gif[/img]
Email
</div>

Grazie :master:

[fcaldera]

#email {
display : block;
width : 101 px;
height : 100 px;
background : url (email.gif) no-repeat;
text-indent : -9999em;
overflow : hidden
}

elimina
- lo spazio tra 100 e px (100px)
- lo spazio tra 101 e px (101px)

e controlla il percorso dell'immagine

[abra]

Grandissimo!!!!

Ho corretto quello e anche lo spazio che c'era tra url e (email.gif).
Ora funziona splendidamente:

Posto il codice funzionante di modo che possa essere utile a chi dovesse cercare:

/*stile barra superiore*/
#email {
display : block;
width : 100px;
height : 100px;
background : url(immagine1.gif) no-repeat;
text-indent : -9999em;
overflow : hidden
}
#email:hover {
background : url(immagine2.gif) no-repeat;
}

Grazie mille fcaldera!