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

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 >
    <div ></div>
    <div ></div>
  </div>

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

CodePudding user response：

Add overflow: hidden; to your .container

CodePudding user response：

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 >
    <div ></div>
    <div ></div>
  </div>

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

CodePudding user response：

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 >   
    <div ></div>
    <div ></div>
  </div>
  
  <script src="index.js"></script>
</body>