Как инвертировать цвет всей страницы при наведении на ссылку - PullRequest
2 голосов
/ 02 ноября 2019

Я хотел бы инвертировать цвета всей страницы (текст, изображения, фон) при наведении на определенную ссылку в моем меню. Думайте об этом как о предварительном просмотре в темном режиме, просто наведя курсор на кнопку.

Мне известен фильтр CSS: инвертировать (100%);но не уверен, как сделать всю страницу инвертированной на основе одного зависания с помощью CSS. Спасибо за любую помощь!

1 Ответ

2 голосов
/ 02 ноября 2019

Вы должны использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...