este pequeño programa contiene una tabla simple HTML el cual posee dos botones abajo para manipular la celdas.
boton 1: entra en el modo de selección, es decir, la tabla completa se pinta de un color ej:rojo y en este punto, quisiera que a través de eventos como "mouseenter" y "mouseover" se aplique un hover para que al pasar el mouse sobre cada celda se pinte de otro color ej:verde, como indicando mi selección pero no han funcionado.
boton 2: una vez seleccionada la celda con un click, este debe remover los eventos del mouse que causan el hover y tampoco han funcionado.
He logrado aplicar el hover de otra manera pero al presionar el boton secundario los eventos siguen aplicando color a las celdas. Tengo entendido que removeEventListener podría solucionar lo de remover los eventos
Les dejo mi código:
//metodos que añaden y sacan los efectos
function addEffect(td) {
td.className = 'td-hover';
}
function remEffect(td) {
td.className = '';
}
// funcion del boton primario
function cellSelector() {
table.style.background = 'rgba(30, 105, 204, 0.5)';
const td = table.getElementsByTagName('td');
for(let i = 0, j = td.length; i < j; i++) {
td[i].addEventListener('mouseenter', addEffect(this));
td[i].addEventListener('mouseover', remEffect(this));
}
}
// funcion del boton secundario
btn_done.addEventListener('click', () => {
if (table.style.background != null) {
table.style.background = 'none';
}
});
Soy nuevo en JS.
Gracias.
.addClass("conEfectoHover")
y.removeClass("conEfectoHover")
y en el css le pones.conEfectoHover:hover{lo que quieras }