hover funktion

[theboubaz]

Hallo Leute,
ich arbeite gerade in meiner Freizeit an einer HTML und CSS Website, und bin hier auf ein Problem gestoßen; wäre es theoretisch möglich, dass ich wenn ich über eine bestimmte klasse mit der maus gehe (hover also), dass sich eine änderung auf den ganzen body überträgt, wie beispielsweise 'background-color: ffffff'?
LG
PS: meinen jetzigen Code findet ihr im Anhang

 

[Sempervivum]

Will man das nur mit CSS machen, hat man das Problem, dass man nicht im DOM aufwärts gehen kann, d. h. von .box aus kann man body nicht adressieren. Man könnte daran denken, ein Overlay zu verwenden, aber einfacher und direkter ist es, Javascript zu verwenden, dann ist man vollkommen frei in der Adressierung:

    const body = document.querySelector('body'),
      boxes = document.querySelectorAll('.box');
    boxes.forEach(item => {
      item.addEventListener('mouseover', event => {
        body.classList.add('hovered');
      });
      item.addEventListener('mouseout', event => {
        body.classList.remove('hovered');
      });
    });

Dieses Skript ganz am Ende des Body einfügen, vor dem schließenden </body>.
Und dann mit CSS die Hintergrundfarbe einstellen:

    body.hovered {
      background-color: white;
    }