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>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);
}
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.
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 = "");