tablas - tr hover css
cols, colgroups y css: hover psuedoclass (5)
AFAIK CSS Hovers en TR no son compatibles con IE de todos modos, así que, en el mejor de los casos, la parte de TR solo funcionará en Firefox.
Nunca he visto un :hover trabajar en un col / colgroup así que no estoy seguro si eso es posible ...
Piensa que podrías estar atascado con una implementación de Javascript.
here un ejemplo que funciona (filas y columnas) en Firefox, pero una vez más está roto en IE ... cols no funcionan.
Intento crear una tabla para mostrar el IMC de una persona.
Como parte de esto, me gustaría, on: hover, resaltar también <tr> y <col> (o <colgroup> ), para que la intersección sea más aparente.
Como la tabla tendrá medidas tanto métricas como imperiales, el: flotar 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?
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 preguntando lo imposible, necesito ir a JQuery-wards?
Aquí hay un método de CSS puro que no usa Javascript.
Usé ::before y ::after pseudo-elements para resaltar filas y columnas. z-index mantiene el resaltado debajo de <tds> en caso de que necesite manejar eventos de clic. position: absolute les permite abandonar los límites de <td> . overflow: hidden en la <table> oculta el desbordamiento de resaltado.
No fue necesario, pero también lo hice seleccionar solo la fila o columna cuando estás 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>
Hay un plugin de jQuery muy decente que he encontrado aquí que hace un muy buen trabajo de este tipo de cosas con un montón de ejemplos. Preferentemente usaría eso.
Me encontré con esta forma ordenada de hacerlo desde css-tricks.com . También preparé un violín mientras me css-tricks.com tiempo sin nada de fantasía, pero puedes obtener la idea con el mismo código provisto por esa página de css-trick.
// El 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>
// La 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");
}
});
})
Respuesta en vivo ( https://jsfiddle.net/craig1123/d7105gLf/ )
Ya hay respuestas CSS y JQuery; sin embargo, he escrito una simple respuesta javascript pura.
Primero encuentro todas las etiquetas col y td , obtengo el índice de columna de cada celda haciendo element.cellIndex , y luego agrego una clase CSS con un fondo en mouseenter y lo mouseleave 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));
}