cols, colgroups y css: psuedoclase al pasar el cursor

Question

Estoy intentando crear una tabla para mostrar el IMC de un individuo.

Como parte de esto, me gustaría, al pasar el mouse, por el <tr> y <col> (o <colgroup>) también se resaltará, para que la intersección sea más evidente.

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

Entonces...un ejemplo (la tabla real es...más grande), pero esto debería 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? ¿Necesito utilizar JQuery-wards?

Answer 1

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

solía ::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 sobre el <table> oculta el desbordamiento de resaltado.

No fue necesario, pero también hice que seleccionara solo la fila o columna cuando estás en los encabezados.El .row y .col las clases se encargan de esto.Si desea simplificar, puede eliminarlos.

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

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

Producción:

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

Hay un muy buen plugin de jQuery que he encontrado rel="noreferrer"> que hace un trabajo muy bueno de este tipo de cosas con un montón de ejemplos. Preferentemente que haría uso de eso.

Answer 3

Que yo sepa CSS se cierne sobre TR 's no son compatibles con IE de todos modos, por lo que en el mejor de la parte de TR que sólo funcionará en Firefox.

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

¿Cree que puede ser pegado con una implementación de JavaScript.

aquí que funciona (filas y cols) en Firefox pero una vez más sus rotas en el IE ... cols no funcionan.

Answer 4

Me encontré con esta clara forma de hacer que su css-tricks.com 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");
        }
    });
})

Salida del violín aquí

Answer 5

Respuesta en vivo (https://jsfiddle.net/craig1123/d7105gLf/)

Ya existen respuestas CSS y JQuery;sin embargo, he escrito una respuesta simple y pura en JavaScript.

Primero encuentro todos los col y td etiquetas, obtenga el índice de columna de cada celda haciendo element.cellIndex, y luego agregue una clase CSS con un fondo en mouseenter y quitándolo 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));
}

Aquí hay un violín