0

I am building a webpage and i have set a body backround-image. Is there a way to change the url of the image when the user presses the mouse key, and change it back when the mouse key is released? Basically the change lasts the same amount of time as the click itself.

Also, how do i make sure this change works for a click anywhere on the page? Will adding an event listener to the body element suffice? Thanks in advance.

VlassisFo
  • 650
  • 1
  • 8
  • 26

1 Answers1

2

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.

css3-selectors spec

Pure CSS example:

body:active {
    background-image: [IMAGE];
}

Example jsfiddle

Joseph Young
  • 2,758
  • 12
  • 23
  • Thanks ! The click part works but for some reason it won't work for any location on the page. Any ideas? – VlassisFo Jul 30 '16 at 17:32
  • @Alan Can you give us an example where it doesn't work? – Joseph Young Jul 30 '16 at 17:39
  • It works on elements of the page (divs etc) but i want it (if possible) to work on other spots as well – VlassisFo Jul 30 '16 at 17:41
  • @Alan But, if not the elements of the page, what else could those spots be? – Joseph Young Jul 30 '16 at 17:45
  • Lets say my page is 1000x800. If the elements (so far) occupy only half of that , the remaiming space is blank and merely displays the backround image. This effect doesn't work on the blank space. It doesn't really matter, it's just out of curiosity – VlassisFo Jul 30 '16 at 17:49
  • I assume you're directly setting the width of the body then. I suppose the only way to remedy that is the wrap the entire page in a container div, and set the width of that instead of the body. Then the body can stretch the entire width of the page to receive the clicks. – Joseph Young Jul 30 '16 at 17:53