'How to add background color to specific coordinates in html css js?

Here is my code -

function myFunction(e) {
  document.getElementById("x").style.backgroundColor = "orange";
}

function myFunction2() {
  document.getElementById("x").style.backgroundColor = "aqua";
}
body {
  background-color: aqua
}
<!DOCTYPE html>
<html>

<body id="x" onmousemove="myFunction(event)" onmouseout="myFunction2()">

  <p>Lorem ipsum text...</p>

  <p>I am gonna change my color ;)</p>

  <p id="demo"></p>

</body>

</html>

What I want is that I want to change the color of the areas of mouse movement in using the coordinates.

I don't know how to explain this, but I want it like this: https://projects.codesandbox.io

here, when your mouse moves, the background color of that area changes.

How to do that using HTML, CSS, and JS?

javascripthtmlcssmouseevent


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions