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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

CodePudding user response：

Here is the solution if you just want CSS:

button {
  background-color: black;
  color: white;
  padding: 10px;
  border: none;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #eee;
  color: black;
}

<button>Button</button>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You don't need javascript for this, you only need :hover pseudo-class like this:

.button {
    background-color: yellow;
    color:black;
}

.button:hover {
    background-color: blue;
    color: white;
}

If you want to invert colors always without thinking what colors are the opposite, just use:

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

You can see how invert filter works here: invert()

I think it's the best for what you need without adding workload to the project. if you need to support internet explorer, the invert filter is not an option.

CodePudding user response：

Or in Javascript this will help you on your way:

onHover = element => element.style.backgroundColor = `rgb(${window.getComputedStyle(element, null).getPropertyValue("background-color").replace('rgb(','').replace(')','').split(',').map(e=> 255 - e).join(',')})`;

Just for fun:

window.addEventListener("mouseover", (evt)=> onHover(evt.target));
window.addEventListener("mouseout", (evt)=> evt.target.style.backgroundColor = "");

CodePudding user response：

You can also use JavaScript like this:

 document.getElementById("submitButton").addEventListener("mouseover", function() {
    document.getElementById("submitButton").style.backgroundColor = "#eee";
 });