html: hover table column

Question

Comment puis-je modifier la colonne d'arrière-plan d'une table html colonne lorsque la souris est dessus?

De préférence avec css seulement.

Answer 1

Ne fonctionne que pour les cellules ou les lignes, désolé. par exemple.

td { 
    background-color: blue; 
} 

td:hover { 
    background-color: red; 
} 

Il existe des solutions JavaScript disponibles mais rien en CSS ne va faire ce que vous voulez en raison des limitations des sélecteurs.

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

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

/* nothing for all columns */ 

Answer 2

Je ne pense pas qu'il existe un moyen propre de HTML + CSS pour faire cela. Javascript est une alternative, par exemple le jQuery tableHover plugin

Answer 3

Vous pouvez essayer d'expérimenter avec étiquette <col> et col:hover { background: red; } style, mais je doute que cela fonctionnera. Quoi qu'il en soit, cela ne fonctionnera certainement pas dans les anciennes versions de MSIE, vous aurez donc besoin de javascript pour le faire.

Answer 4

J'ai eu un problème similaire où j'avais trop de colonnes à afficher à l'écran. VIA PHP, j'ai transformé chaque ligne en une table de colonne 1 x. Donc, n lignes = n tables. J'ai ensuite imbriqué chaque table dans une table principale. Cela m'a permis d'appeler td: hover à partir de ma feuille de style. Comme chaque td contient une table, cela a le même effet que de mettre en surbrillance la colonne A quand je la survole.

Answer 5

Vous pouvez sélectionner la ligne entière avec CSS pur en utilisant:

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

La réalisation de cet effet pour une colonne est impossible avec cette approche, comme cellule (td) est un enfant d'une ligne (tr), non une colonne. Pour le faire fonctionner dans IE7 +, assurez-vous d'ajouter la déclaration doctype (ce que vous devriez toujours faire :)).

Answer 6

Cela peut être fait en utilisant CSS sans JavaScript.

J'ai utilisé le pseudo-élément ::after pour effectuer la surbrillance. z-index conserve la mise en évidence sous le <tds> au cas où vous devez gérer des événements de clic. L'utilisation d'une hauteur massive permet de couvrir toute la colonne. overflow: hidden sur le <table> masque le dépassement de surbrillance.

Démo: http://jsfiddle.net/ThinkingStiff/2XeYe/

Sortie:

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

Je VHA e une solution plus simple (par exemple en direct: 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'); 
}); 

Un exemple concret: http://jsfiddle.net/q3HHt/1/

Answer 8

Juste pour étend réponse Muhammads (https://stackoverflow.com/a/11828637/1316280), si vous voulez mettre en évidence les Col. que dans la table réelle, changer le jquery code-partie: ce jsFiddle est spécifique pour seulement la réelle Table

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/