Менять фон в зависимости где находится мышка

Question

Можно ли сделать так, чтобы когда мышкой водишь по странице менялся ее стиль. То есть, если мышка в левой части экрана фон зеленый, а если мышка на правой части (половине), то например красный Простыми словами: Мышка в левой части экрана - фон зеленый Мышка в правой части экрана - фон красный

Answer 1

document.addEventListener('mousemove', (e) => {
  const maxWidth = document.body.offsetWidth;
  document.body.style.backgroundColor = `rgb(${e.clientX / maxWidth * 255}, 128, 80)`
});

Answer 2

Смена цвета:

document.addEventListener("mousemove", function(color) {
  var width = window.innerWidth;
  document.body.style.background = color.clientX > (width / 2) ? "red" : "green";
})
document.onmouseout = function() {
  document.body.style.background = 'yellow';
}

body {background: yellow;}

Смена фона:

document.addEventListener("mousemove", function(color) {
  var width = window.innerWidth;
  document.body.style.background = color.clientX > (width / 2) ? "url('https://wallbox.ru/resize/2560x1440/wallpapers/main/201128/planeta-zemlya-zelenyy-3eb21e4.jpg') center center" : "url('http://www.fonstola.ru/pic/201111/1920x1080/fonstola.ru-50805.jpg') center center";
  document.body.style.backgroundSize = "cover";
})
document.onmouseout = function() {
  document.body.style.background = "url(https://d2hhj3gz5jljkm.cloudfront.net/wallpapers2/078/675/409/152/original/Wallpapersroom_com___apo_nebula21_by_Fune_Stock_1680x1050.jpg) center center";
  document.body.style.backgroundSize = "cover";
}

body {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url('https://d2hhj3gz5jljkm.cloudfront.net/wallpapers2/078/675/409/152/original/Wallpapersroom_com___apo_nebula21_by_Fune_Stock_1680x1050.jpg') center center no-repeat;
  transition: background 0.2s;
  background-size: cover;
}

По вертикали:

document.addEventListener("mousemove", function(color) {
  var height = window.innerHeight;
  document.body.style.background = color.clientY > (height / 2) ? "red" : "green";
})
document.onmouseout = function() {
  document.body.style.background = 'yellow';
}

body {background: yellow; transition: background 0.5s;}

Answer 3

Если использовать палитру hsl, можно охватить все цвета:

addEventListener('mousemove', e => document.body.style.background = 
  `hsl(${e.clientX/innerWidth*360},55%,${25+(1-e.clientY/innerHeight)*50}%)`);

Answer 4

Вариант без JS.
Конечно же при условии, что поверх "решения" ничего не будет :D

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
}

.change-bg {
  width: 100vw;
  height: 100vh;
}

.change-bg > div {
  height: 100vh;
}

.change-bg .-left,
.change-bg .-right {
  width: 50vw;
  position: absolute;
}

.change-bg .-left {
  left: 0;
}

.change-bg .-right {
  right: 0;
}

.change-bg .-bg {
  width: 100vw;
  background: yellow;
  transition: all .3s linear;
}

.change-bg .-left:hover ~ .-bg {
  background: red;
}
.change-bg .-right:hover ~ .-bg {
  background: blue;
}

<div class="change-bg">
  <div class="-left"></div>
  <div class="-right"></div>
  <div class="-bg"></div>
</div>

БЛОГ НА HUSL

Менять фон в зависимости где находится мышка

Ответы (4 шт):