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
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>Add overflow: hidden; to your .container
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>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>