Estoy un poco atascado en un fotograma clave. Tengo una tabla con valores de una búsqueda (json) y debo agregar un desplazamiento cuando los valores son menos de 5 en rojo y comienzan desde 5 en verde. Este es mi código en javascript ->
¿Cómo tengo que implementar el fotograma clave con él en css o es diferente de lo que pienso?
// Html <div id="group3"> <table class="table"> <thead> <tr class="info"> <th></th> <th>February</th> <th>March</th> <th>April</th> <th>May</th> <th>June</th> <th>July</th> <th>August</th> </tr> </thead> <tbody id='mytable'> </tbody> </table> </div> //CSS Keyframe? //hover let cells = document.querySelectorAll("tbody"); cells.forEach( el => el.addEventListener('mouseenter', function () { if(el.textContent < 5){ el.classList.add('underfive'); } else if (el.textContent >=5){ el.classList.add('abovefive'); } })); // reset animationx cells.forEach(el => el.addEventListener('mouseleave', function () { if(el.textContent < 5){ el.classList.remove('underfive'); } else if (el.textContent >=5){ el.classList.remove('abovefive'); } }));debería ser así ->
esta es la página de inicio, el fondo es blanco
este es el resultado final como debería ser, cargado desde un archivo json en una tabla, valor rojo
Según lo que diga, desea mostrar un color de fondo o un estilo en general diferente al predeterminado si el mouse está sobre td .
Así que usa :hover para eso. Desea tener una transición entre esos estados, así que use transition .
Desea tener un color diferente si está por encima o por debajo de 5. Así que defina lo que quiere tener como predeterminado y agregue una clase para el otro caso.
let data = [1,4,2,8,12,2,5,7]; const tr = document.querySelector('tr'); data.forEach(elem => { let td = document.createElement('td'); td.textContent = elem; td.classList.toggle('belowfive', elem < 5); tr.appendChild(td); }); td { transition: background-color 1s; background-color: white; padding: 1rem; border: 1px solid hsl(0 0% 50%); } td:hover { background-color: green; } td.belowfive:hover { background-color: red; } <table> <tbody> <tr> </tr> </tbody> </table>