cols, colgroups y css: hover psuedoclass

Question

Estoy tratando de crear una tabla para mostrar el IMC de una persona.

Como parte de esto, me gustaría, en: suspender, para la <tr>y<col> (o <colgroup>) ser destacado también, a fin de que la intersección para ser más aparente.

Como la tabla tendrá mediciones métricas e imperiales, el: hover no tiene que detenerse en la celda (desde cualquier dirección) y, de hecho, sería una bonificación si se extendiera de un eje al otro . También estoy usando el doctype XHTML 1.1 Strict, si esto hace la diferencia?

Así que ... un ejemplo (de la tabla de verdad ... más grande), pero esto debe ser representativo:

<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> 

estoy pidiendo lo imposible, hacer Necesito ir a JQuery-wards?

Answer 1

Aquí hay un método de CSS puro que no utiliza Javascript.

Utilicé ::before y ::after pseudoelementos para resaltar filas y columnas. z-index mantiene el resaltado debajo del <tds> en caso de que necesite manejar eventos de clic. position: absolute les permite salir de los confines del <td>. overflow: hidden en el <table> oculta el desbordamiento de las altas luces.

No fue necesario, pero también lo hice seleccionar solo la fila o columna cuando está en los encabezados. Las clases .row y .col se encargan de esto. Si desea la simplificación, puede eliminarlos.

Esto funciona en todos los navegadores modernos (y se degrada graciosamente en los navegadores más antiguos al no hacer nada).

Demostración: http://jsfiddle.net/ThinkingStiff/rUhCa/

Salida:

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 Los CSS Hovers en TR no son compatibles con IE de todos modos, por lo que, en el mejor de los casos, la parte TR solo funcionará en Firefox.

Ni siquiera ve una obra :hover en un col/colgroup así que no sé si eso es posible ...

piensa que podría ser pegado con una implementación de Javascript.

Theres un ejemplo que funciona here (filas & cols) en Firefox pero de nuevo sus rotas en el IE ... cols no funciona.

Answer 3

Hay un plugin de jQuery muy decente que he encontrado located here que hace un muy buen trabajo de este tipo de cosas con un montón de ejemplos. Preferentemente usaría eso.

Answer 4

I llegó al otro lado de esta forma elegante de hacerlo desde su css-tricks.com que también preparó un violín, mientras que jugar un poco con él nada lujoso, pero u puede conseguir la idea de su con el mismo código proporcionado por esa página css-trick

// el código 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> 

// El 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

respuesta Vivo (https://jsfiddle.net/craig1123/d7105gLf/)

Ya hay respuestas CSS y JQuery; sin embargo, he escrito una simple respuesta javascript pura.

primera vez que se encuentran todos los col y td etiquetas, obtener el índice de la columna de cada célula haciendo element.cellIndex, a continuación, agregue una clase CSS con un fondo de mouseenter y retirarlo en 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