Вы должны использовать Javascript для достижения того, что вы хотите. Идея состоит в том, чтобы применить класс с filter: invert(1);
к элементу тела, когда мышь находится над (onmouseoover
событие) ссылкой, и удалить его, когда мышь уходит (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>