如何在悬停在链接上时反转整个页面的颜色
如何在悬停在链接上时反转整个页面的颜色
提问于 2019-11-02 14:49:34
当悬停在菜单中的特定链接上时，我想反转整个页面的颜色(文本、图像、背景)。把它想象成只需将鼠标悬停在按钮上即可实现的“黑暗模式”预览。
我知道CSS过滤器: invert(100%)；但不确定如何使用css使整个页面基于一次悬停进行反转。谢谢你的帮助！
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-02 16:29:15
你必须使用Javascript来实现你想要的东西。其思想是在鼠标悬停(onmouseoover事件)链接时对body元素应用一个具有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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58668878
复制相关文章
相似问题
腾讯云开发者
