英文:
div with added class in JS not triggering a mouseover event over multiple elements
问题
我的内部光标是一个圆圈,应该在JS中设置mouseover事件时随着具有.grow类的外部光标的大小而增大。当我悬停在按钮上时,它不会触发(它根本不会触发)。
有多个按钮(这是一个测试计算器),都有类名'button'。
<div class="inner-cursor">
</div>
<div class="outer-cursor">
</div>
<button class="button" type="button" value="1" id="1">1</button>
<button class="button" type="button" value="2" id="2">2</button>
.inner-cursor {
position: fixed;
left: 10px;
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
background-color: #627CE4;
border-radius: 50%;
pointer-events: none;
transition: width 0.5s, height 0.5s;
}
.outer-cursor {
position: fixed;
left: 10px;
width: 25px;
height: 25px;
transform: translate(-50%, -50%);
border: 1px solid #627CE4;
border-radius: 50%;
pointer-events: none;
transition: 0.1s;
}
.inner-cursor.grow{
width: 25px;
height: 25px;
transition: width 0.5s, height 0.5s;
}
let innerCursor = document.querySelector('.inner-cursor');
let outerCursor = document.querySelector('.outer-cursor');
let buttons = document.querySelector('.button');
document.addEventListener('mousemove', moveCursor);
function moveCursor(e){
let x = e.clientX;
let y = e.clientY;
innerCursor.style.left = `${x}px`;
innerCursor.style.top = `${y}px`;
outerCursor.style.left = `${x}px`;
outerCursor.style.top = `${y}px`;
}
function growCursor(e){
buttons.addEventListener('mouseover', function (){
innerCursor.classList.add('grow');
});
buttons.addEventListener('mouseleave', function () {
innerCursor.classList.remove('grow');
})
};
英文:
my inner-cursor is a circle that should grow to the size of the outer-cursor with the class of .grow when I set the mouseover event in JS. It doesn't trigger when I hover over specifically only buttons (it doesn't trigger at all).
There are multiple buttons (it is a test calculator) all with the class of 'button'.
<div class="inner-cursor">
</div>
<div class="outer-cursor">
</div>
<button class="button" type="button" value="1" id="1">1</button>
<button class="button" type="button" value="2" id="2">2</button>
.inner-cursor {
position: fixed;
left: 10px;
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
background-color: #627CE4;
border-radius: 50%;
pointer-events: none;
transition: width 0.5s, height 0.5s;
}
.outer-cursor {
position: fixed;
left: 10px;
width: 25px;
height: 25px;
transform: translate(-50%, -50%);
border: 1px solid #627CE4;
border-radius: 50%;
pointer-events: none;
transition: 0.1s;
}
.inner-cursor.grow{
width: 25px;
height: 25px;
transition: width 0.5s, height 0.5s;
}
let outerCursor = document.querySelector('.outer-cursor');
let buttons = document.querySelector('.button');
document.addEventListener('mousemove', moveCursor);
function moveCursor(e){
let x = e.clientX;
let y = e.clientY;
innerCursor.style.left = `${x}px`;
innerCursor.style.top = `${y}px`;
outerCursor.style.left = `${x}px`;
outerCursor.style.top = `${y}px`;
}
function growCursor(e){
buttons.addEventListener('mouseover', function (){
innerCursor.classList.add('grow');
});
buttons.addEventListener('mouseleave', function () {
innerCursor.classList.remove('grow');
})
};
My attempts included the above (which produced no result) and the following where I tried to make the buttons an array (which actually halts the div from following the cursor's movement anymore):
let buttons = Array.from(document.querySelectorAll('b'));
buttons.forEach((button) => {
buttons.addEventListener('mouseover', () => {
innerCursor.classList.add('grow');
});
buttons.addEventListener('mouseleave', () => {
innerCursor.classList.remove('grow');
});
});
Thank you for any suggestions
答案1
得分: 0
错误在你的 JavaScript 代码中,必须是 button
而不是 buttons
在 forEach 函数内部。
// 这里可以使用以下任何一个
let buttons = Array.from(document.querySelectorAll('.button'));
// 添加了这个 innerCursor
let innerCursor = document.querySelector('.inner-cursor');
buttons.forEach((button) => {
button.addEventListener('mouseover', () => {
innerCursor.classList.add('grow');
});
button.addEventListener('mouseleave', () => {
innerCursor.classList.remove('grow');
});
});
英文:
error in your js code, it must be button
and not buttons
inside the forEach function
// use either one here
let buttons = Array.from(document.querySelectorAll('.button'));
// added this innerCursor
let innerCursor = document.querySelector('.inner-cursor');
buttons.forEach((button) => {
button.addEventListener('mouseover', () => {
innerCursor.classList.add('grow');
});
button.addEventListener('mouseleave', () => {
innerCursor.classList.remove('grow');
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论