strano comportamento a:hover su immagine

silvia.c · 15 Nov 2012

Buongiorno a tutti,

ho creato un semplice menu con delle immagini e relativo stile per fare in modo che compaia un bordo in basso verde (hover) e poi tramite classe specifica questo bordo sia rosso (evidenziato).

Questo è il css:
a:hover {border-bottom: 2px solid #005949; }

.evidenziato {border-bottom: 2px solid #F00;}

Questo però è quello che succede:

Come mai il bordo dell'hover è "staccato" dall'immagine? Non capisco perchè mi faccia questo scherzo!!

Qualcuno mi sa aiutare?

Grazie!

cavaliere123 · 15 Nov 2012

Salve io ho fatto questa prova usando un riquadro come hai fatto tu...

HTML:

<html><head>

<style type='text/css'>

a:link    {border-bottom: 2px solid green; };

a:visited {border-bottom: 2px solid yellow; };

a:hover {border-bottom: 2px solid #005949; };

a:active  {border-bottom: 2px solid orange; };

</style>


</head><body>



<a href="http://forum.mrwebmaster.it/html-css/32243-strano-comportamento-hover-immagine.html" target="_blank"><img src="Bottone.jpg"></a>


</body></html>

E funziona benissimo.... cioè non si distanzia il bordo, chiaramente ho fatto prova su Internet Explorer

silvia.c · 16 Nov 2012

Ciao,

il problema nasce con la classe .evidenziato che devo inserire nel menu per es. sul bottone CHI per identificare che mi trovo nella pagina del CHI SIAMO.
Appena la inserisco sballano le immagini... c'è magari un altro modo (che non sia creare un'immagine ad hoc)?

cavaliere123 ha scritto:
Salve io ho fatto questa prova usando un riquadro come hai fatto tu...

HTML:

<html><head> <style type='text/css'> a:link {border-bottom: 2px solid green; }; a:visited {border-bottom: 2px solid yellow; }; a:hover {border-bottom: 2px solid #005949; }; a:active {border-bottom: 2px solid orange; }; </style> </head><body> <a href="http://forum.mrwebmaster.it/html-css/32243-strano-comportamento-hover-immagine.html" target="_blank"><img src="Bottone.jpg"></a> </body></html>

E funziona benissimo.... cioè non si distanzia il bordo, chiaramente ho fatto prova su Internet Explorer

criric · 18 Nov 2012

immagino che la classe evidenziato l'hai data al tag a
puoi postare anche l'html del menui?

silvia.c · 20 Nov 2012

ciao,

ho rifatto l'esempio in modo più completo:

Codice:

a:link {border-bottom: 2px solid red; }
a:visited {border-bottom: 2px solid purple; }
a:hover {border-bottom: 2px solid blue; }
.evidenziato{ border-bottom: 2px solid orange; }

HTML:

<a href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" /></a>

 <a href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" class="evidenziato" /></a>

 <a href="pippo.htm" class="evidenziato"><img src="ico.gif" alt="pippo" border="0" /></a>

In pratica io vorrei che l'arancione (class evidenziato) sostituisse il rosso (link). Invece va ad aggiungersi e l'icona salta un pochino in alto.
Se sposto la classe sul tag a invece non funziona niente.

Mi sembra una problema così banale eppure non ne vengo fuori!! :incazz2:
aiut!

criric · 20 Nov 2012

cambia

Codice:

.evidenziato{ border-bottom: 2px solid orange; }

con

Codice:

a.evidenziato{ border-bottom: 2px solid orange; }

e assegna la classe al tag a
a me su FF funziona

HTML:

<style>
    a:link {border-bottom: 2px solid red; }
    a:visited {border-bottom: 2px solid purple; }
    a:hover {border-bottom: 2px solid blue; }
    a.evidenziato{ border-bottom: 2px solid orange; }

</style>

<a class="evidenziato" href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" /></a>

<a href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" /></a>

<a href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" /></a>

silvia.c · 21 Nov 2012

accipicchia non mi funziona! ho addirittura copiato esattamente dal tuo post ma la classe "evidenziato" viene ignorata, il link resta "red". :dipser:
Ho provato sia su FF che su IE. Proprio è incredibile.

Vale2 · 21 Nov 2012

silvia.c ha scritto:
ciao,

ho rifatto l'esempio in modo più completo:
Vedi l'allegato 1469

Codice:

a:link {border-bottom: 2px solid red; } a:visited {border-bottom: 2px solid purple; } a:hover {border-bottom: 2px solid blue; } .evidenziato{ border-bottom: 2px solid orange; }

HTML:

<a href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" /></a> <a href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" class="evidenziato" /></a> <a href="pippo.htm" class="evidenziato"><img src="ico.gif" alt="pippo" border="0" /></a>

In pratica io vorrei che l'arancione (class evidenziato) sostituisse il rosso (link). Invece va ad aggiungersi e l'icona salta un pochino in alto.
Se sposto la classe sul tag a invece non funziona niente.

Mi sembra una problema così banale eppure non ne vengo fuori!! :incazz2:
aiut!

Ciao,

è cosi, se imposti a una classe un bordo (bottom) di 2Px e l'immagine è alta 200Px diventa 202Px per questo salta un pochino in alto.

Per i link applicando la classe al tag href si posiziona qualche pixel sotto l'immagine.

Per questo:

Codice:

<style>
    a:link {border-bottom: 2px solid red; }
    a:visited {border-bottom: 2px solid purple; }
    a:hover {border-bottom: 2px solid blue; }
    a.evidenziato{ border-bottom: 2px solid orange; }

</style>

<a class="evidenziato" href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" /></a>

<a href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" /></a>

<a href="pippo.htm"><img src="ico.gif" alt="pippo" border="0" /></a>

Rimane rosso perché devi dichiarare che quella classe è un link

Codice:

a.evidenziato:link{ border-bottom: 2px solid orange; }

Valeria.

Cerca

Cerca

strano comportamento a:hover su immagine

silvia.c

Nuovo Utente

cavaliere123

Utente Attivo

silvia.c

Nuovo Utente

criric

Super Moderatore

silvia.c

Nuovo Utente

criric

Super Moderatore

silvia.c

Nuovo Utente

Vale2

Utente Attivo

Discussioni simili