Rollover CSS non funziona...

[lorenzos]

Ciao.
Ho creato una raccolta di miniature di foto cui dovrebbe cambiare il colore del bordo tramite css...
Il problema è che succede con Firefox e non con IE.

Ho usato una classe per l'effetto:

.foto
e .foto:hover

La pagina è questa .

Perchè non va?

[pierofix]

Prova a mettere qualcosa come "3px" al posto di "medium" nello spessore dei bordi.

[lorenzos]

Ho provato così ma non funziona:

.foto {
margin-top: 5px;
border: 3px solid #FFFFFF;
margin-left: 10px;
}
.foto:hover {
margin-top: 5px;
border: 3px solid #FFE79E;
margin-left: 10px;
}

Con Firefox invece va sempre...

[span]

Metodo lungo: http://atomsurfer.altervista.org/xht...gini_bordi.php


Metodo corto:

Per tutti i browser escluso Internet Explorer:

a img{
    border: 1px solid #00f;
}
a:hover img{
    border-color: #f00;
}

Per Internet Explorer il codice funziona solo se prima di a:hover img si definisce una qualsiasi proprietà per a:hover. Quindi, partendo dal codice visto in precedenza: 

a img{
    border: 1px solid #00f;
}
a:hover{
    font-size: 100%;
}
a:hover img{
    border-color: #f00;
}

[lorenzos]

Scusa, ma quindi non devo più usare le classi?
O posso farlo anche attraverso esse?

Solo perchè per altre pagine ho già impostato a in modo diverso...

Posso adattare questo:

.foto {
margin-top: 5px;
border: 3px solid #FFFFFF;
margin-left: 10px;
}
.foto:hover {
margin-top: 5px;
border: 3px solid #FFE79E;
margin-left: 10px;
}

[span]

Originariamente inviato da lorenzos
Scusa, ma quindi non devo più usare le classi?
O posso farlo anche attraverso esse?

Se il tuo codice è così <img ... /> il tuo codice diventa:

.foto img{ 
  margin-top: 5px; 
  border: 3px solid #FFF; 
  margin-left: 10px; 
}

.foto:hover{font-weight: bold;}

.foto:hover img{ 
  border-color: #FFE79E; 
}

[lorenzos]

La classe l'ho data alle immagini, non al tag a...

[span]

a .foto{ 
  margin-top: 5px; 
  border: 3px solid #FFF; 
  margin-left: 10px; 
}

/* Se hai definito qualche altro a:hover 
prima di questa dichiarazione la prossima riga non 
serve */
a:hover{font-weight: bold;}


a:hover .foto{ 
  border-color: #FFE79E; 
}

[lorenzos]

Grazie mille.
Gentilissimo ed ho risolto dando la classe al tag a e non più all'immagine. Pensavo fosse più complesso.

(Inizio ad odiare IE)...

[salasir]

E' sempre il solito problema che IE riconosce HOVER solo sul tag <A>
mentre gli altri già compatibili CSS2 possono utilizzarlo anche su altri tag!

Vedi la discussione in merito ai Menù con CSS

Maurizio