悬停在链接上时如何反转整个页面的颜色
Posted
技术标签:
【中文标题】悬停在链接上时如何反转整个页面的颜色【英文标题】：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 标签中添加这个样式表，同时悬停链接
您可能对此答案感兴趣：***.com/questions/29037763/css-equivalent-of-has，AFIAK 无法使用纯 CSS 解决方案，但可能很快就会实现。
【参考方案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>【讨论】：
以上是关于悬停在链接上时如何反转整个页面的颜色的主要内容，如果未能解决你的问题，请参考以下文章
在图像和文本块上重新创建Adobe Portfolio双悬停效果