cols, colgroups et css: hover psuedoclass

Question

J'essaie de créer une table pour afficher l'IMC d'un individu.

Dans le cadre de ce, je voudrais, sur: hover, pour le <tr>et<col> (ou <colgroup>) être mis en évidence aussi, pour que l'intersection soit plus apparente. Comme le tableau comportera à la fois des mesures métriques et impériales, le: hover ne doit pas s'arrêter à la cellule (de n'importe quelle direction) et serait, en fait, un bonus s'il s'étendait d'un axe à l'autre. . J'utilise aussi le doctype XHTML 1.1 Strict, si cela fait une différence?

Alors ... un exemple (le vrai tableau de ... plus), mais cela devrait être représentatif:

<script> 

tr:hover {background-color: #ffa; } 

colgroup:hover, 
col:hover {background-color: #ffa; } 

</script> 

...

<table> 
    <col class="weight"></col><colgroup span="3"><col class="bmi"></col></colgroup> 

    <tr> 
     <th></th> 
     <th>50kg</th> 
     <th>55kg</th> 
     <th>60kg</th> 
    </tr> 

    <tr> 
     <td>160cm</td> 
     <td>20</td> 
     <td>21</td> 
     <td>23</td> 
    </tr> 

    <tr> 
     <td>165cm</td> 
     <td>18</td> 
     <td>20</td> 
     <td>22</td> 
    </tr> 

    <tr> 
     <td>170cm</td> 
     <td>17</td> 
     <td>19</td> 
     <td>21</td> 
    </tr> 

</table> 

que je demande l'impossible, faire Je dois aller à JQuery-Wards?

Answer 1

Voici une méthode CSS pure n'utilisant pas Javascript.

J'ai utilisé les pseudo-éléments ::before et ::after pour effectuer la mise en évidence des lignes et des colonnes. z-index conserve la mise en évidence sous le <tds> au cas où vous devez gérer des événements de clic. position: absolute leur permet de quitter les limites du <td>. overflow: hidden sur le <table> masque le dépassement de surbrillance.

Ce n'était pas nécessaire, mais je l'ai également fait sélectionner uniquement la ligne ou la colonne lorsque vous êtes dans les en-têtes. Les classes .row et .col prennent soin de cela. Si vous souhaitez le simplifier, vous pouvez les supprimer.

Cela fonctionne dans tous les navigateurs modernes (et se dégrade gracieusement sur les anciens navigateurs en ne faisant rien).

Démo: http://jsfiddle.net/ThinkingStiff/rUhCa/

Sortie:

CSS:

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

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

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

td:hover::after, 
.col: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 class="col">50kg</th> 
     <th class="col">55kg</th> 
     <th class="col">60kg</th> 
     <th class="col">65kg</th> 
     <th class="col">70kg</th> 
    </tr> 
    <tr> 
     <th class="row">160cm</th> 
     <td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> 
    </tr> 
    <tr> 
     <th class="row">165cm</th> 
     <td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> 
    </tr> 
    <tr> 
     <th class="row">170cm</th> 
     <td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> 
    </tr> 
    <tr> 
     <th class="row">175cm</th> 
     <td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> 
    </tr> 
</table> 

Answer 2

AFAIK CSS Hovers sur TR ne sont pas supportés dans IE de toute façon, donc au mieux la partie TR de cela ne fonctionnera que dans Firefox.

jamais vu un :hover travail sur un col/colgroup donc pas sûr si cela est possible ...

pensez que vous pourriez coincé avec une mise en œuvre Javascript.

Theres un exemple qui fonctionne here (lignes & CLO) dans Firefox mais encore une fois ses brisées dans IE ... ne fonctionne pas Col..

Answer 3

Il ya un plugin jQuery très décent que j'ai trouvé located here qui fait un très bon travail de ce genre de chose avec beaucoup d'exemples. Préférentiellement, je l'utiliserais.

Answer 4

I tombé sur cette belle façon de le faire à partir de son css-tricks.com J'ai aussi préparé un violon tout en déconner avec elle rien d'extraordinaire mais u peut avoir l'idée de son avec le même code fourni par cette page css-trick

// Le Html

<table> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <colgroup></colgroup> 
    <thead> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
</table> 

// Le Js

$(function(){ 
    $("table").delegate('td','mouseover mouseleave', function(e) { 
     if (e.type == 'mouseover') { 
      $(this).parent().addClass("hover"); 
      $("colgroup").eq($(this).index()).addClass("hover"); 
     } 
     else { 
      $(this).parent().removeClass("hover"); 
      $("colgroup").eq($(this).index()).removeClass("hover"); 
     } 
    }); 
}) 

Check out the fiddle here

Answer 5

réponse en direct (https://jsfiddle.net/craig1123/d7105gLf/)

Il existe déjà des réponses CSS et JQuery; Cependant, j'ai écrit une simple réponse javascript pure.

je d'abord trouver tous les col et td balises, obtenir en faisant element.cellIndex l'index de colonne de chaque cellule, puis ajoutez une classe CSS avec un arrière-plan sur mouseenter et en le retirant sur mouseleave.

HTML

<table id='table'> 
    <col /> 
    <col /> 
    <col /> 
    <col /> 
    <thead> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>Birthdate</th> 
     <th>Preferred Hat Style</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Abraham Lincoln</td> 
     <td>204</td> 
     <td>February 12</td> 
     <td>Stovepipe</td> 
    </tr> 
    <tr> 
     <td>Winston Churchill</td> 
     <td>139</td> 
     <td>November 30</td> 
     <td>Homburg</td> 
    </tr> 
    <tr> 
     <td>Rob Glazebrook</td> 
     <td>32</td> 
     <td>August 6</td> 
     <td>Flat Cap</td> 
    </tr> 
    </tbody> 
</table> 

CSS

body { 
    font: 16px/1.5 Helvetica, Arial, sans-serif; 
} 

table { 
    width: 80%; 
    margin: 20px auto; 
    border-collapse: collapse; 
} 
table th { 
    text-align: left; 
} 
table tr, table col { 
    transition: all .3s; 
} 
table tbody tr:hover { 
    background-color: rgba(0, 140, 203, 0.2); 
} 
table col.hover { 
    background-color: rgba(0, 140, 203, 0.2); 
} 
tr, col { 
    transition: all .3s; 
} 
tbody tr:hover { 
    background-color: rgba(0,140,203,.2); 
} 
col.hover { 
    background-color: rgba(0,140,203,.2); 
} 

JS

const col = table.getElementsByTagName('col'); 
const td = document.getElementsByTagName('td'); 

const columnEnter = (i) => col[i].classList.add('hover'); 
const columnLeave = (i) => col[i].classList.remove('hover'); 

for (const cell of td) { 
    const index = cell.cellIndex; 
    cell.addEventListener('mouseenter', columnEnter.bind(this, index)); 
    cell.addEventListener('mouseleave', columnLeave.bind(this, index)); 
} 

Here is a fiddle