悬停在链接上时如何反转整个页面的颜色

【问题标题】：How to invert color of entire page when hovering on a link悬停在链接上时如何反转整个页面的颜色
【发布时间】：2020-02-28 07:41:26
【问题描述】：

当悬停在菜单中的特定链接上时，我想反转整个页面（文本、图像、背景）的颜色。只需将鼠标悬停在按钮上，就可以将其想象为暗模式预览。

我知道 css 过滤器：invert(100%);但不确定如何使用 CSS 使整个页面基于一次悬停反转。感谢您的帮助！

【问题讨论】：

<body style="filter: invert(1);"> 通过 JS 在你的 body 标签中添加这个样式表，同时悬停链接
您可能对此答案感兴趣：stackoverflow.com/questions/29037763/css-equivalent-of-has，AFIAK 无法使用纯 CSS 解决方案，但可能很快就会实现。

标签： javascript html css dom

【解决方案1】：

你必须使用 Javascript 来实现你想要的。这个想法是在鼠标悬停（onmouseoover 事件）链接时将带有filter: invert(1); 的类应用于正文元素，并在鼠标离开时将其删除（onmouseleave 事件）：

const invertLink = document.querySelector('#invert');
const toggleDark = () => document.querySelector('body').classList.toggle('dark');
invertLink.addEventListener('mouseover', toggleDark);
invertLink.addEventListener('mouseleave', toggleDark);

.dark {
  filter: invert(1);
  background: black;
}

<body>
  <h1>Hello World</h1>
  <a href="#" id="invert">Hover me!</a><br><br>
  <img src="https://www.gravatar.com/avatar/">
</body>

【讨论】：