strano comportamento a:hover su immagine

silvia.c

Nuovo Utente
15 Nov 2012
4
0
0
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:
menu.gif

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

Grazie!
 

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
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

Nuovo Utente
15 Nov 2012
4
0
0
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)?

:confused:




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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
immagino che la classe evidenziato l'hai data al tag a
puoi postare anche l'html del menui?
 

silvia.c

Nuovo Utente
15 Nov 2012
4
0
0
ciao,

ho rifatto l'esempio in modo più completo:
Senza-titolo-1.gif
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!
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
15 Nov 2012
4
0
0
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

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Strano comportamento di 'use' in php PHP 2
jonnino2004 strano comportamento del posizionamento su google SEO e Posizionamento 5
A [PHP] Strano comportamento Form PHP 1
S Comportamento strano php/html... PHP 10
A Strano comportamento dello slash / al fondo dell'URL HTML e CSS 1
B gestione eventi con addEventListener,comportamento strano dell'handle Javascript 2
M Comportamento strano di questo script per caricamento file sql in database PHP 7
C strano comportamento file css HTML e CSS 2
M Strano comportamento pagina HTML e CSS 4
A strano comportamento di $_FILES nel controllo PHP 11
V Strano comportamento sessioni PHP 6
J strano comportamento di due codici apparentemente identici..... PHP 1
SolidSnake4 strano comportamento script Ajax 6
S comportamento strano delle sessioni PHP 0
PoLe Strano comportamento del PC Sicurezza e Virus 4
S Strano comportamento di 'Subscribed Threads' Supporto Mr.Webmaster 2
moustache text box + post php con IE si comporta in modo strano PHP 16
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
S Strano problema con i title su Google SEO e Posizionamento 3
E strano errore php/mysql PHP 8
elpirata Strano problema con include PHP 5
K strano focus input type="text" HTML e CSS 4
felino Google My Business: uno strano errore... Social Media Marketing 3
F Strano problema.. HTML e CSS 6
K strano errore su R.array Sviluppo app per Android 3
T problema strano con procedura di controllo da database, di dati immessi in un form asp Classic ASP 5
P Windows 7 rete e strano file batch Reti LAN e Wireless 1
I Hide a tempo crea uno strano effetto jQuery 2
X Strano collegamento HTML e CSS 16
neo996sps Strano problema con explode di una data PHP 4
K Strano errore in una query mysql da php PHP 5
M Windows xp: problemi con un messaggio benvenuto strano Windows e Software 2
catellostefano Codice strano Javascript 2
E problema strano con db per i permessi PHP 1
D Errore strano durante l'uso di mail() PHP 2
Y strano errore con immissione nickname e password PHP 8
M Problema di connessione strano. Reti LAN e Wireless 2
A Warning strano PHP 2
borgo italia strano codice HTML e CSS 2
SolidSnake4 strano errore PHP 12
borgo italia strano fenomeno PHP 1
SolidSnake4 strano problema template HTML e CSS 6
SolidSnake4 strano problema con ie6 HTML e CSS 6
@ Progetto strano n° 3.... Presenta il tuo Sito 9
@ Altro progetto strano... Presenta il tuo Sito 4
@ Progetto un pò strano... Presenta il tuo Sito 0
B Problema Strano Su DIV. mi scompare tutto!! HTML e CSS 8
L Problema strano con i link Flash 2
C problema strano css HTML e CSS 5
M Problema indicizzazione di www.meedl.com su google ! E' un problema veramente strano! SEO e Posizionamento 1

Discussioni simili