悬停时使用JavaScript和CSS反转按钮颜色

Question

我有一个任务，当我使用JavaScript将鼠标悬停在按钮上时，我需要实现颜色反转。是否可以使用inverteMethod来反转css类，如下所示？

我试过在js中创建它，但我不知道它是否正确。我从两天开始使用JS ^^

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>

Answer 1

尝试将反转值设置为1，而不是按钮

.invertedButton {
filter: invert(1);
}

并尝试使用mouseenter而不是mouseover，因为mouseover被触发多次，而当光标越过按钮时，mousecenter只被触发一次

invertLink.addEventListener('mouseover', toggleDark);

仅使用css的的解决方案

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

Answer 2

如果您只想要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>

Answer 3

您不需要javascript，只需要像这样的:hover伪类：

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

如果你想反转颜色而不考虑什么颜色是相反的，只需使用：

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

你可以在这里看到反转过滤器的工作原理：反转((

我认为这是在不增加项目工作量的情况下最好的。如果您需要支持internetexplorer，反转过滤器不是一个选项。

Answer 4

或者在Javascript中，这将帮助您：

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

只是为了好玩：

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

Answer 5

您也可以使用如下JavaScript：

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