У меня есть одинаковые элементы, и мне нужно добавить к текущему элементу с классом '.adventure-item' функцию offsetX и offsetY. Хочу сделать движение элемента за мышкой. Прикрепляю код и ссылку на codpen.
let add = document.querySelectorAll('.advantage-description'),
mainItem = document.querySelectorAll('.advantage-item'),
x,
y,
contain;
function go() {
function offsetY(el) {
let rect = el.getBoundingClientRect();
return rect.top + scrollTop;;
}
function offsetX(sm){
let rects = sm.getBoundingClientRect();
return rects.left + scrollLeft;
}
mainItem.forEach(element => {
element.addEventListener('mousemove', second);
element.addEventListener('mouseout', four)
});
function second(event){
mainItem.forEach((element,i) => {
element.setAttribute('data' ,`sub-${i}`);
contain = this.getAttribute('data');
third(contain);
x = event.clientX;
y = event.clientY;
});
}
function third(contain) {
add.forEach((element,i) => {
element.classList.add(`sub-${i}`);
if(element.classList.contains(contain)){
element.style.display = 'block';
element.style.bottom = y + 'px';
element.style.right = x + 'px';
}else{
element.style.display = 'none';
}
});
}
function four(e) {
add.forEach(element => {
element.style.display ='none'
});
}
}
go();