As handling the movement of the mouse over an object?

var x, i, j, selElmnt, b, c;
 x = document.querySelectorAll('button.xver.material');
 for (i = 0; i < x.length; i++) {
 var a = document.createElement('div');
 a.setAttribute('class', 'light');
x[i].appendChild(a);
 var br = x[i].getBoundingClientRect();
 var pcx = br.left;
 var pcy = br.top;
 var pxw = br.width;
 var pxh = br.height;

 var primaryLength = pxw;
 if (pxh > pxw) primaryLength = pxh;
 a.style.width = primaryLength / 2;
 a.style.height = primaryLength / 2;
console.log(pxw);
 var light = a;
 x[i].onmouseenter = function(e) {
console.log('shit');
}
 x[i].addEventListener('mousemove', function(e) {
 light.style.display = 'block';
 var cx = e.x - pcx - (primaryLength / 4);
 var cy = e.y - pcy - (primaryLength / 4);
 light.style.left = cx + 'px';
 light.style.top = cy + 'px';
 // console.log(cx);
 }, false);
 x[i].onmouseout = function(e) {
 a.style.display = 'none';
}
 }

Like every element in the selector is created on "child" and attached the event to a "child". But really, when you move mouse on any button, moves the child of only one of all.
June 5th 19 at 21:20
1 answer
June 5th 19 at 21:22
Solution
You have var light = a; at the end of the cycle becomes the last block, and in the event function of the light is taken, which is equal to the last block.
Write either so
var x, i, j, selElmnt, b, c;
 x = document.querySelectorAll('button.xver.material');
 for (i = 0; i < x.length; i++) {
 var a = document.createElement('div');
 a.setAttribute('class', 'light');
x[i].appendChild(a);
 var br = x[i].getBoundingClientRect();
 var pcx = br.left;
 var pcy = br.top;
 var pxw = br.width;
 var pxh = br.height;

 var primaryLength = pxw;
 if (pxh > pxw) primaryLength = pxh;
 a.style.width = primaryLength / 2;
 a.style.height = primaryLength / 2;
console.log(pxw);
 let light = a; // let instead of var
 x[i].onmouseenter = function(e) {
console.log('shit');
}
 x[i].addEventListener('mousemove', function(e) {
 light.style.display = 'block';
 var cx = e.x - pcx - (primaryLength / 4);
 var cy = e.y - pcy - (primaryLength / 4);
 light.style.left = cx + 'px';
 light.style.top = cy + 'px';
 // console.log(cx);
 }, false);
 x[i].onmouseout = function(e) {
 a.style.display = 'none';
}
 }

Or so
var x, i, j, selElmnt, b, c;
 x = document.querySelectorAll('button.xver.material');
 for (i = 0; i < x.length; i++) {
 var a = document.createElement('div');
 a.setAttribute('class', 'light');
x[i].appendChild(a);
 var br = x[i].getBoundingClientRect();
 var pcx = br.left;
 var pcy = br.top;
 var pxw = br.width;
 var pxh = br.height;

 var primaryLength = pxw;
 if (pxh > pxw) primaryLength = pxh;
 a.style.width = primaryLength / 2;
 a.style.height = primaryLength / 2;
console.log(pxw);
 var light = a; 
 (function(light) { // Save the current block circuit
 x[i].onmouseenter = function(e) {
console.log('shit');
}
 x[i].addEventListener('mousemove', function(e) {
 light.style.display = 'block';
 var cx = e.x - pcx - (primaryLength / 4);
 var cy = e.y - pcy - (primaryLength / 4);
 light.style.left = cx + 'px';
 light.style.top = cy + 'px';
 // console.log(cx);
 }, false);
 x[i].onmouseout = function(e) {
 a.style.display = 'none';
}
})(light);
 }


UPD: Still primaryLength, pcx and pcy is the same for everyone, but they try my example to sort themselves out.
let helped!
after the issue found that i was retained. - tre.Lesch93 commented on June 5th 19 at 21:25

Find more questions by tags JavaScript