Colorar bordo a immagine su passaggio link testuale

[d4ve]

Ciao.

Vorrei far colorare il bordo di un immagine (compresa tra <a>) quando il mouse passa sopra un link testuale.
Con css è possibile? :\

Se do una classe al link, poi come faccio a fargli capir di colorare il bordo? :master:

[Mich_]

testo del link[img]...[/img]

.pippo:link {
text-decoration: underline;
color: blue;
}
.pippo:hover {
text-decoration: underline;
color: pink;
}
.pippo:link img {
border: 1px solid blue;
}
.pippo:hover img {
border: 1px solid red;
}

naturalmente di puo` abbellire, modificare, aggiornare: occorre conoscere il contesto.

[d4ve]

Grazie mille Mich_!
Però non mi funziona. Ne su firefox, ne su IE... IE 6 ovviamente.

Non so se mi son spiegato bene, io vorrei che quando si passa sul link testuale compaia il bordo sull'immagine.
Con il css che mi hai elencato il bordo compare soltanto quando si passa sopra l'immagine.


Soluzioni cross browser? ci sono?

[Mich_]

Quello che ho postato dovrebbe gia` fare quello che chiedi.
Ma posta il tuo codice HTML, magari io non ho indovinato il tuo codice, ed holavorato su un codice che non ti va bene.

[d4ve]

Beh, ho adattato l'html a quello che mi hai detto.

[url="#"]<h3>Link 1<h3>[img]img/img_1.gif[/img][/url]
[url="#"]<h3>Link 2<h3>[img]img/img_2.gif[/img][/url]
[url="#"]<h3>Link 3<h3>[img]img/img_3.gif[/img][/url]
[url="#"]<h3>Link 4<h3>[img]img/img_4.gif[/img][/url]
[url="#"]<h3>Link 5<h3>[img]img/img_5.gif[/img][/url]
[url="#"]<h3>Link 6<h3>[img]img/img_6.gif[/img][/url] 

e nel css ho inserito:

.foto:link {
text-decoration: none;
color: #FF0000;
}
.foto:hover {
text-decoration: underline;
color: #FFFF00;
}
.foto a:link img {
border: 1px solid #FFFF00;
}
.foto a:hover img {
border: 1px solid #FF0000;
} 

Cosa sbaglio?

[fcaldera]

.foto:link img {
border: 1px solid #FFFF00;
}
.foto:hover img {
border: 1px solid #FF0000;
}

[d4ve]

Sì scusa.
Nel css che ho incollato sopra, ho incollato la prova che avevo fatto... altrimenti inizialmente era come mi ha scritto Mich_... ma non funziona uguale!

Dite che è più conveniente usar un image replacing (sempre che sia possibile)?

[Mich_]

Direi che ti stai inventando il codice HTML ...

Non puoi inserire un elemento di tipo blocco dentro un elemento inline.
Inoltre non puoi aprire un <h3> dentro un altro <h3>.

Ecco il codice HTML corretto:
<h3>Link 1[img]img/img_1.gif[/img]</h3>

con CSS:
.foto:link {
text-decoration: underline;
color: #f00;
}
.foto:hover {
text-decoration: underline;
color: #ff0;
}
.foto:link img {
border: 1px solid #ff0;
}
.foto:hover img {
border: 1px solid #f00;
}

Ps: non capisco pero` il gioco dei colori che hai impostato (ma forse e` un errore dovuto alle varie prove).

L'img replacement e` possibile, ma i problemi sono gli stessi: deve prima funzionare il gioco degli :hover, poi cosa cimetti puoi cambiarlo.

[d4ve]

Ecco cos'era!
Quei dannati <h3>, non me ne ero neanche accorto.

Ora tutto ok, grazie mille!

I colori negli esempi eran più o meno casuali. In realtà il bordo di partenza è nero e diventa giallo su hover.


Grazie di nuovo!

Buon lavoro.