cols, colgroups y css: hover psuedoclass

Intento crear una tabla para mostrar el IMC de una persona.

Como parte de esto, me gustaría, on: hover, resaltar también

y

(o

), 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:

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

 
50kg 55kg 60kg
160cm 20 21 23
165cm 18 20 22
170cm 17 19 21

¿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 en caso de que necesite manejar eventos de clic. position: absolute les permite abandonar los límites de

. overflow: hidden en la

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:

enter image description here

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:

 
50kg 55kg 60kg 65kg 70kg
160cm 2021232527
165cm 1820222426
170cm 1719212325
175cm 1618202224

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.

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.

Aquí hay un ejemplo que funciona (filas y columnas) en Firefox, pero una vez más está roto en IE … cols no funcionan.

Me encontré con esta forma ordenada de hacerlo desde css-tricks.com . También preparé un violín mientras me pasaba el 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

 

// 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"); } }); }) 

Mira el violín aquí

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

 
Name Age Birthdate Preferred Hat Style
Abraham Lincoln 204 February 12 Stovepipe
Winston Churchill 139 November 30 Homburg
Rob Glazebrook 32 August 6 Flat Cap

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

    Intereting Posts