CODEWITHSUNDEEP
javascripthtmlcssdom
Mika
Mika

Reputation: 23

How to invert color of entire page when hovering on a link

I would like to invert the colors of the entire page (text, images, background) when hovering on a specific link in my menu. Think about it like a Dark Mode preview just by hovering on a button.

I'm aware of the css filter: invert(100%); but not sure how to make the entire page invert based on one hover using CSS. Thanks for any help!

Upvotes: 1

Views: 875

Answers (1)

András Simon
András Simon

Reputation: 815

You have to use Javascript to achieve what you want. The idea is to apply a class with filter: invert(1); to the body element when the mouse is over (onmouseoover event) the link and remove it when the mouse leaves (onmouseleave event):

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>

Upvotes: 2

Related Questions