Riga tabella del profilo al passaggio del mouse

Question

Sto tentando di evidenziare il bordo di una riga della tabella su hover. Sfortunatamente questo funziona solo per la prima fila di celle. Le righe inferiori hanno un bordo che non cambia colore. Ho provato a utilizzare outline ma non funziona con lo :hover nel webkit.

http://jsfiddle.net/S9pkM/2/

immaginare la vostra tabella HTML standard. Alcuni sono con alcuni td. Passare il mouse su una riga dovrebbe evidenziare il bordo in rosso.

table { border-collapse: collapse; } /*I am aware of separate */ 
table td { border: 3px solid black; } 
table tr:hover td { border-top-color: red; border-bottom-color: red; } 
table tr:hover td:first-child { border-left-color: red; } 
table tr:hover td:last-child { border-right-color: red; } 

Sono aperto ad approcci alternativi, ma sono bloccato con la struttura della tabella. Nessun inserimento di html aggiuntivo oltre allo standard <table> <tr> <td>

Answer 1

sto affrontando lo stesso problema e finalmente trovato una soluzione più semplice here.

È possibile utilizzare questo trucco CSS (border-style: double;) che lavora per 1px confini:

#mytable tr.row:hover td 
{ 
    border-style: double; 
    border-color: red; 
} 

Questo renderà il vostro border-color lavoro (essere la parte superiore più uno) non importa quale. :-)

Answer 2

perché non utilizzare il bordo separato? http://jsfiddle.net/S9pkM/6/

Answer 3

Per i bordi 1px, vedere la soluzione di Leniel che utilizza border-style: double. Questo è molto più semplice. Un doppio bordo è uno che mostra una linea 1px per i bordi interni ed esterni del bordo. Questo non fa nulla per un bordo 1px, ma su> 1px c'è un gap.

Per i bordi> 1px si rimuove il bordo inferiore per tutti gli <td> con border-bottom: 0. I bordi superiori delle altre celle manterranno tutto come dovrebbero, tranne che per l'ultima riga. L'ultima riga che risolviamo con tr:last-child td { border-bottom: your border style }. Alla fine, nella tua pseudoclass di hover, imposti il ​​bordo inferiore.

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */ 
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; } 
table tr:last-child td { border-bottom: 1px solid black; } 
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; } 
table tr:hover td:first-child { border-left-color: red; } 
table tr:hover td:last-child { border-right-color: red; } 

Answer 4

Basta mettere questo codice nella tua sezione head:

<style> 
    table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;} 
    table td:hover {border:2px solid red; } 
</style>