I build a website with some sliders (Wordpress - Divi). I added some javascript to let the slider description follow the mousepointer when the mouse hovers over the slider. Works perfectly, BUT: when I scroll the mouse the pointer shifts downwards as expected, but the slider description does not shift accordingly; it remains where it was. So from that point on the link between the mouse and the description is gone.
Question: how can I enforce the description to follow the mouse when scrolling...... If you want to see the result until now, please check https://roel.famnabuurs.nl
Any help appreciated
The code as requested:
const sliderzelf = document.getElementById(slidernaam);
const titleblockslist = document.getElementById(slidernaam).getElementsByClassName('et_pb_slide_description');
for (let indslide of titleblockslist) {
indslide.style.setProperty('opacity',1, 'important');
var sliderOffset = sliderzelf.getBoundingClientRect();
let xpos = e.clientX - sliderOffset.left ;
// do not shift too far to the right
if (xpos > sliderzelf.clientWidth - indslide.clientWidth) {
xpos = sliderzelf.clientWidth - indslide.clientWidth;
}
if (xpos < 15) {
// do not shift too far to the left
xpos = 15;
}
indslide.style.left = (xpos) + 'px';
indslide.style.top = e.clientY + 'px';
}