Совместимы ли querySelectorAll и getBoundingClientRect? ⇐ Jquery

[Anonymous]

Я очень неопытный разработчик. и я изо всех сил пытаюсь найти решение. У меня есть две кнопки с одним и тем же классом и элемент div с именем курсорFollower, который фактически соответствует фактическому позиционированию страниц pageX и pageY. На прошлой неделе, благодаря помощи некоторых людей, мне удалось изменить форму курсора Follower в зависимости от кнопки, на которой он завис. дело в том, что мне не удается заставить его работать со всеми кнопками одного класса. Кто-то предложил мне изменить его с querySelector на querySelectorAll, чтобы выбрать все элементы одного и того же класса, но как узнать, какой из них зависает в данный момент? Кроме того, по какой-то причине во время работы над кодом он продолжает говорить, что getBoundingClientRect теперь должен быть внутри функции, он получал размер и положение кнопки как отдельные переменные. Я включил все в функцию, но ничего не происходит. Может ли кто-нибудь сказать мне, что я делаю неправильно, и подсказать, что делать вместо этого?

Код: Выделить всё

let cursor = document.querySelector('.cursorFollower');
let button = document.querySelector('.menutext');

let buttonWidth = button.getBoundingClientRect().width;
let buttonHeight = button.getBoundingClientRect().height;
let buttonX = button.getBoundingClientRect().left;
let buttonY = button.getBoundingClientRect().top;

var onContainer = false;

const handleCursor = (e) => {
if (onContainer) {
cursor.setAttribute(
"style",
`left: ${buttonX}px;top: ${buttonY}px;width: ${buttonWidth}px;height: ${buttonHeight}px; transform: rotate(0deg); border: 1px solid #84c4b5;`
);
button.setAttribute(
"style",
`color: #84C4B5;`
);
} else {
cursor.setAttribute(
"style",
`left: width: 20px; height: 20px; transform: rotate(45deg); border: solid 1px #ffffff;`
);
cursor.style.left = e.pageX - 10 + 'px';
cursor.style.top = e.pageY - 10 + 'px';
button.setAttribute(
"style",
`color: #ffffff;`
);
}
};

document.addEventListener("mousemove", handleCursor);

button.onmouseover = () => {
onContainer = true;
};

button.onmouseleave = () => {
onContainer = false;
};

Код: Выделить всё

*{
margin: 0;
padding: 0;
}

.container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
height: 100vh;
background-color: #0A193E;
color: white;
font-family: sans-serif;
font-size: 20px;
}

.container2 {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
height: 100vh;
background-color: green;
color: white;
font-family: sans-serif;
font-size: 20px;
}

.menutext {
padding: 10px 20px;
cursor: none;
transition: all 0.2s ease;
}

.cursorFollower {
width: 20px;
height: 20px;
position: absolute;
border: 2px solid white;
transition: all 0.2s ease-out;
pointer-events: none;
transform: rotate(45deg);
}

Код: Выделить всё

button1
button2

button3

Подробнее здесь: https://stackoverflow.com/questions/684 ... compatible