'How to contain 'mousemove' effect INSIDE a <div>

When I add mousemove event I am getting it all over my page. I want it inside my div only. when my cursor leaves the div it should not show the effect I have added. please help me to solve this. thankyou

Screenshot for clarification

Hexagon Image - if you want to try

Here is my code (HTML, CSS, and JS included)

const BG = document.querySelector(".bg");

document.querySelector(".container").addEventListener("mousemove", function(e) {
  BG.style.left = e.clientX + "px";
  BG.style.top = e.clientY + "px";
});
.container {
  height: 800px;
  width: 100%;
  background-color: #000;
  position: relative;
}

.hex {
  background: url("images/Hexagon.svg") repeat;
  height: 800px;
  width: 100%;
  position: absolute;
  background-size: 500px;
  z-index: 1;
}

.bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  width: 300px;
  background: linear-gradient(90deg, #335bfa 0%, #2ae9c9 100%);
  filter: blur(20px);
  z-index: 0;
  overflow: none;
}
<body>

  <div class="container">
    <div class="hex"></div>
    <div class="bg"></div>
  </div>

  <script src="index.js"></script>
</body>
javascripthtmlcss


Solution 1:[1]

Place overflow: hidden into .container.

const BG = document.querySelector(".bg");

document.querySelector(".container").addEventListener("mousemove", function(e) {
  BG.style.left = e.clientX + "px";
  BG.style.top = e.clientY + "px";
});
.container {
  height: 800px;
  width: 100%;
  background-color: #000;
  position: relative;
  overflow: hidden; 
}

.hex {
  background: url("images/Hexagon.svg") repeat;
  height: 800px;
  width: 100%;
  position: absolute;
  background-size: 500px;
  z-index: 1;
}

.bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  width: 300px;
  background: linear-gradient(90deg, #335bfa 0%, #2ae9c9 100%);
  filter: blur(20px);
  z-index: 0;
  overflow: none;
}
<body>

  <div class="container">
    <div class="hex"></div>
    <div class="bg"></div>
  </div>

  <script src="index.js"></script>
</body>

Solution 2:[2]

You can use pointer-events: none; on your .bg element as showed in this demo. That's the reason why your code wasn't working as expected, because the .bg element inside the div.container was bubbling the event to the parent. The quickest way to prevent that is to avoid that element to capture the event at all.

const BG = document.querySelector(".bg");

document.querySelector(".container").addEventListener("mousemove", function(e) {
  BG.style.left = e.clientX + "px";
  BG.style.top = e.clientY + "px";
});
.container {
  height: 800px;
  width: 100%;
  background-color: #000;
  position: relative;
}

.hex {
  background: url("images/Hexagon.svg") repeat;
  height: 800px;
  width: 100%;
  position: absolute;
  background-size: 500px;
  z-index: 1;
}

.bg {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 300px;
  width: 300px;
  background: linear-gradient(90deg, #335bfa 0%, #2ae9c9 100%);
  filter: blur(20px);
  z-index: 0;
  overflow: none;
}
<body>

  <div class="container">   
    <div class="hex"></div>
    <div class="bg"></div>
  </div>
  
  <script src="index.js"></script>
</body>

Sources

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

Source: Stack Overflow

Solution Source
Solution 1 New contributor
Solution 2 Diego De Vita

Related Questions