I’ve got a task where I need to implement a color inversion when I’m hovering over a button using JavaScript. Is it possible to invert a css class by using the invert Method as shown below?

I’ve tried to create it in js but I don’t know if it’s correct or not. I’m using JS since two days ^^

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>

>Solution :

Try to set invert value to 1 instead of button

.invertedButton {
  filter: invert(1);
}

and try to use mouseenter instead mouseover because mouseover is triggered many times while mouseenter is triggered only once when cursor gets over button

invertLink.addEventListener('mouseover', toggleDark);

Solution using css only

.button:hover{
  filter: invert(1);
}