mi scuso se faccio autopromozione ma servirà a chiarire meglio il problema.

su questa pagina per mostrare quell'effetto dinamico sulle celle delle tabelle nelle colonne (passando col mouse la cella diventa gialla; incasinato a parole, meno a vederlo...) uso questo codice

<tr>
<td onmouseover="this.style.backgroundColor='#ffff00'; " onmouseout="this.style.backgroundColor='#bedae8';" width="100%" class="testocolonna" style="border-bottom: 1 solid #0099FF">
<p style="margin-top: 0; margin-bottom: 0">&gt; sfondi mare e spiaggia</p>
</td></tr>

ripetendolo per ogni cella, appesantisco il codice in maniera evidente e quindi vorrei cercare di mettere tutto sotto css, cercando di mantenere pressoché inalterata la situazione visiva.

Ho provato a fare un esperimento sul css così (su suggerimento di un amico e collega):

a.cambioback:link, a.cambioback:visited { font-family:arial; font-size:11px; text-decoration:none; background-color:#bedae8;}
a.cambioback:hover { font-family:arial; font-size:11px; text-decoration:none; background-color:#ffff00;}

ma il risultato non è esattamente quello che pensavo di ottenere e il bordo azzurro in basso scompare.

Cosa mi consigliate di fare per risolvere il problema?
Grazie anticipatamente e mi scuso se per sbaglio ho fatto autopromozione