Tengo una tarea en la que necesito implementar una inversión de color cuando paso el mouse sobre un botón usando JavaScript. ¿Es posible invertir una clase css utilizando el método de inversión como se muestra a continuación?
He intentado crearlo en js pero no se si es correcto o no. Estoy usando JS desde hace dos días ^^
const invertLink = document.querySelector('#submitButton'); const toggleInversion = () => document.querySelector('button').classList.toggle('invertedButton'); invertLink.addEventListener('mouseover', toggleDark); invertLink.addEventListener('mouseleave', toggleDark); .button { background-color: #3cb371; /*green*/ border: 2px solid; border-color: #ffa500; /*yellow*/ color: #f8f8f8; /*white*/ padding: 12px 28px; text-align: center; font-size: 14px; cursor: pointer; } .invertedButton { filter: invert(button); } <button type="submit" class="button" id="submitButton" onclick="validateFields()"> Submit</button>Intente establecer el valor de inversión en 1 en lugar del botón
.invertedButton { filter: invert(1); }e intente usar mouseenter en lugar de mouseover porque mouseover se activa muchas veces, mientras que mouseenter se activa solo una vez cuando el cursor pasa sobre el botón
invertLink.addEventListener('mouseover', toggleDark);Solución usando solo css
.button:hover{ filter: invert(1); }No necesita javascript para esto, solo necesita :hover pseudo-clase flotante como esta:
.button { background-color: yellow; color:black; } .button:hover { background-color: blue; color: white; }Si desea invertir los colores siempre sin pensar en qué colores son los opuestos, simplemente use:
.button:hover { filter: invert(1) }Puedes ver cómo funciona el filtro de inversión aquí: invert()
Creo que es lo mejor para lo que necesita sin agregar carga de trabajo al proyecto. si necesita admitir Internet Explorer, el filtro invertido no es una opción.
O en Javascript esto te ayudará en tu camino:
onHover = element => element.style.backgroundColor = `rgb(${window.getComputedStyle(element, null).getPropertyValue("background-color").replace('rgb(','').replace(')','').split(',').map(e=> 255 - e).join(',')})`;Solo por diversión:
window.addEventListener("mouseover", (evt)=> onHover(evt.target)); window.addEventListener("mouseout", (evt)=> evt.target.style.backgroundColor = "");