html: colonna tabella hover

Question

Come posso modificare la colonna di sfondo di una tabella html colonna quando il mouse è su di esso?

Preferibilmente con solo css.

Answer 1

Funziona solo per celle o righe, mi dispiace. ad es.

td { 
    background-color: blue; 
} 

td:hover { 
    background-color: red; 
} 

Ci sono soluzioni JavaScript disponibili ma nulla in CSS in questo momento farà quello che vuoi a causa delle limitazioni dei selettori.

td /* all cells */ 
{ 
    background-color: blue; 
} 

tr /* all rows */ 
{ 
    background-color: pink; 
} 

/* nothing for all columns */ 

Answer 2

Non penso che ci sia un modo pulito HTML + CSS per farlo. Javascript è un'alternativa, ad esempio il jQuery tableHover plugin

Answer 3

Si può provare a sperimentare con <col> tag e col:hover { background: red; } stile, ma dubito che funzionerà. Ad ogni modo, questo sicuramente non funzionerà con le vecchie versioni di MSIE, quindi per fare questo è necessario javascript.

Answer 4

Ho avuto un problema simile in cui avevo troppe colonne da visualizzare sullo schermo. VIA PHP, ho trasformato ogni riga in una tabella di colonne 1 x. Quindi, n rows = n tables. Ho quindi annidato ogni tabella all'interno di una tabella principale. Ciò mi ha permesso di chiamare td: passa il mouse dal mio foglio di stile. Dato che ogni td ha un tavolo, ha lo stesso effetto di evidenziare una colonna quando lo passo con il mouse.

Answer 5

è possibile evidenziare l'intera riga con puro CSS utilizzando:

tr td {background-color: red;} 
tr:hover td {background-color: blue;} 

Il raggiungimento di questo effetto per una colonna è impossibile con questo approccio, come cellule (TD) è un bambino di una riga (tr), non una colonna.

Per farlo funzionare in IE7 +, assicurarsi di aggiungere la dichiarazione doctype (cosa che si dovrebbe sempre fare comunque :)).

Answer 6

Questo può essere fatto usando CSS senza Javascript.

Ho utilizzato lo pseudoelemento ::after per eseguire l'evidenziazione. z-index mantiene l'evidenziatura sotto lo <tds> nel caso in cui sia necessario gestire gli eventi di clic. Usando un'altezza massiccia gli permette di coprire l'intera colonna. overflow: hidden su <table> nasconde l'overflow di evidenziazione.

Demo: http://jsfiddle.net/ThinkingStiff/2XeYe/

uscita:

CSS:

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
    overflow: hidden; 
    z-index: 1; 
} 

td, th { 
    cursor: pointer; 
    padding: 10px; 
    position: relative; 
} 

td:hover::after { 
    background-color: #ffa; 
    content: '\00a0'; 
    height: 10000px;  
    left: 0; 
    position: absolute; 
    top: -5000px; 
    width: 100%; 
    z-index: -1;   
} 

HTML:

<table> 
    <tr> 
     <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th> 
    </tr> 
    <tr> 
     <th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> 
    </tr> 
    <tr> 
     <th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> 
    </tr> 
    <tr> 
     <th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> 
    </tr> 
    <tr> 
     <th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> 
    </tr> 
</table> 

Answer 7

i hav e una soluzione più semplice (ad esempio dal vivo: http://jsfiddle.net/q3HHt/1/)

HTML:

<table> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 

CSS:

table, td { 
    border: 1px solid black; 
} 

td { 
    width: 40px; 
    height: 40px; 
} 

.highlighted { 
    background-color: #348A75; 
} 

jQuery:

$('td').hover(function() { 
    var t = parseInt($(this).index()) + 1; 
    $('td:nth-child(' + t + ')').addClass('highlighted'); 
}, 
function() { 
    var t = parseInt($(this).index()) + 1; 
    $('td:nth-child(' + t + ')').removeClass('highlighted'); 
}); 

esempio dal vivo: http://jsfiddle.net/q3HHt/1/

Answer 8

Giusto per estende risposta Muhammads (https://stackoverflow.com/a/11828637/1316280), se si desidera evidenziare i colli solo nella tabella effettiva, modificare il jquery-codice-parte a: questo jsfiddle è specifico solo per l'attuale tavolo

jQuery

$('td').hover(function() { 
    var t = parseInt($(this).index()) + 1; 
    $(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted'); 
}, 
function() { 
    var t = parseInt($(this).index()) + 1; 
    $(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted'); 
}); 

jsFiddle: http://jsfiddle.net/q3HHt/123/