Bordo di cella linkata che cambia colore quando passa il mouse

[Gas75]

Salve,
avrei bisogno di una mano per realizzare una cosetta dove credo occorra intervenire con i css...
Devo fare in modo che le celle di una tabella, ciascuna da linkare a una differente pagina web, abbiano un bordo che, al passaggio del mouse, cambi colore.
In sostanza un effetto simile a questo valido per le immagini:

[img]immagine.jpg[/img]

Non so come definire nel css una classe adeguata che mi cambi colore al bordo della cella, e al tempo stesso come richiamare tale classe nella cella, dovendo esserci link all'intera cella, contenente un'immagine e del testo, secondo un codice del genere...

<td valign="top" align="justify" height="132">
[img]../../immagini/prova1.jpg[/img]
Titolo e descrizione intervento

Anno di realizzazione: ????

Importo: ????
</td>

Ho provato così...

<td valign="top" align="justify" height="132">
<a class="cella" href="pagina.htm">
[img]../../immagini/prova1.jpg[/img]
Titolo e descrizione intervento

Anno di realizzazione: ????

Importo: ????
</a></td>

con cella definito in css:

a.cella   { display: block }
a.cella:hover { display: block; background-color: #505050 }

ma mi cambia colore allo sfondo della cella (soltanto dove c'è del testo, tra l'altro) e non al bordo. :master:

[l'evangelista]

Che io sappia IE non supporta la pseudoclasse hover, se non nei link.

Di solito metto un javacript sulla cella:

<td onMouseOver="this.style.border='solid 1px green';" onMouseOut="this.style.border='solid 1px red';">

[Gas75]

Innanzitutto grazie.
Il JS funziona alla perfezione sul bordo.
Però resta il problema di rendere la cella, al tempo stesso, cliccabile per accedere a una differente pagina... :master:

[l'evangelista]

Originariamente inviato da Gas75
Innanzitutto grazie.
Il JS funziona alla perfezione sul bordo.
Però resta il problema di rendere la cella, al tempo stesso, cliccabile per accedere a una differente pagina... :master:

<td onClick="window.location='index.html';" onMouseOver="this.style.border='solid 1px green';this.style.cursor='pointer';" onMouseOut="this.style.border='solid 1px red';this.style.cursor='default';">ciao mondo</td>

[Gas75]

Perfetto!

Ultima cosa...
Il bordo l'ho dovuto mettere, per esigenze grafiche, di 5px... ma nel momento in cui ci passa sopra il mouse, questi pixel spostano tutto quanto c'è al di sotto, e su ogni cella si ripete il fenomeno... :master:
Si può fare in modo che ci siano sempre 5 px di bordo sin dal caricamento della pagina, e che cambino colore (da nero su sfondo nero a bianchi su sfondo nero) senza questo effetto dinamico?
Se metto border="5" alla tabella, ci aggiunge poi cmq altri 5 px per ogni bordo cella.

[l'evangelista]

ma l'hai impostato con i css il bordo?

io ho provato cosi e non ho problemi

<td style="border: solid 5px red;" onClick="window.location='index.html';" onMouseOver="this.style.border='solid 5px green';this.style.cursor='pointer';" onMouseOut="this.style.border='solid 5px red';this.style.cursor='default';">ciao mondo</td>

[Gas75]

Il bordo l'ho impostato definendo la tabella (tag <table>), sia fissandolo pari a 5 che pari a 0, visto che border="5" non me lo fa del colore nero ma con un effetto "cornice 3D" e con effetti diversi al cambiare del browser!
Mettendo quel tuo codice nel tag <td> ottengo che quei 5px si aggiungono a quelli preesistenti, che siano 0 o 5...

[l'evangelista]

abbiamo risolto in pvt, c'era da impostare il border a 5px anche nel css iniziale e non solo sugli eventi del mouse