Javascript 当鼠标悬停在任何按钮上时，执行一个函数

因此，我有一个页面，其中我将光标替换为

div

。 光标只是页面的一部分，我可以使用

CSS

设置动画。 我想实现的主要目标是，当我将光标悬停在任何按钮上时，使其改变大小。 我不能让它工作

光标定位由JQuery脚本处理，但普通脚本似乎不想与我一起工作。。。 我无法修复错误

//移动光标的Jquery代码（div元素）
$（文档）.on（'mousemove'，函数（e）{
$（'#游标'）.css({
左：e.pageX-7，
顶部：e.pageY-7
});
});
//鼠标悬停在按钮上时要执行的函数
document.queryselectoral（'button'）。addEventListener（“鼠标悬停”，光标悬停）；
函数游标悬停（）{
document.getElementById（'object'）.style=“transform:scale（2）；”；
}

正文{
高度：300px；
宽度：300px；
背景色：#ccc；
}
*，正文{游标：无！重要；}
#光标{
位置：固定；
z指数：20000；
高度：15px；
宽度：15px；
背景色：#ffffff；
混合模式：差异化；
边界半径：50%；
不透明度：0；
过渡：0.3s；
过渡属性：变换、不透明度；
指针事件：无；
}
主体：悬停光标{
不透明度：1；
}

悬停在我身上（1）
悬停在我身上（2）
悬停在我身上（3）

你的意思是这样的

//移动光标的Jquery代码（div元素）
var c=document.getElementById（'cursor'）；
document.addEventListener（'mousemove'，（e）=>{
c、 style.left=e.pageX-7+'px'；
c、 style.top=e.pageY-7+‘px’；
});
//鼠标悬停在按钮上时要执行的函数
文件
.querySelectorAll（“按钮”）
.forEach（b=>{
b、 addEventListener（“mouseover”，（）=>c.style.transform='scale（2）'）；
b、 addEventListener（“mouseout”，（）=>c.style.transform='scale（1）'）；
});
正文{
高度：300px；
宽度：300px；
背景色：#ccc；
}
*，正文{游标：无！重要；}
#光标{
位置：固定；
z指数：20000；
高度：15px；
宽度：15px；
背景色：#ffffff；
混合模式：差异化；
边界半径：50%；
不透明度：0；
过渡：0.3s；
过渡属性：变换、不透明度；
指针事件：无；
}
主体：悬停光标{
不透明度：1；
}

悬停在我身上（1）
悬停在我身上（2）
悬停在我身上（3）
你的意思是这样的


//移动光标的Jquery代码（div元素）
var c=document.getElementById（'cursor'）；
document.addEventListener（'mousemove'，（e）=>{
c、 style.left=e.pageX-7+'px'；
c、 style.top=e.pageY-7+‘px’；
});
//鼠标悬停在按钮上时要执行的函数
文件
.querySelectorAll（“按钮”）
.forEach（b=>{
b、 addEventListener（“mouseover”，（）=>c.style.transform='scale（2）'）；
b、 addEventListener（“mouseout”，（）=>c.style.transform='scale（1）'）；
});
正文{
高度：300px；
宽度：300px；
背景色：#ccc；
}
*，正文{游标：无！重要；}
#光标{
位置：固定；
z指数：20000；
高度：15px；
宽度：15px；
背景色：#ffffff；
混合模式：差异化；
边界半径：50%；
不透明度：0；
过渡：0.3s；
过渡属性：变换、不透明度；
指针事件：无；
}
主体：悬停光标{
不透明度：1；
}

悬停在我身上（1）
悬停在我身上（2）
悬停在我身上（3）
这是一个普通的JS解决方案


document.addEventListener（'mousemove'，handleMouseMove，false）；
//缓存元素
const cursor=document.getElementById（'cursor'）；
const buttons=document.queryselectoral（'button'）；
//为每个按钮添加两个事件侦听器
[…按钮].forEach（按钮=>{
按钮。addEventListener（'mouseover'，handleMouseOver，false）；
按钮。addEventListener（'mouseout'，handleMouseOut，false）
});
功能手柄移动（e）{
//您需要确保将“px”添加到
//jQuery会自动执行此操作。
cursor.style.left=`${e.pageX-7}px`；
cursor.style.top=`${e.pageY-7}px`；
}
函数handleMouseOver（）{
cursor.style.transform='scale（2）'；
}
函数handleMouseOut（）{
cursor.style.transform='scale（1）'；
}
正文{
高度：300px；
宽度：300px；
背景色：#ccc；
}
*,
身体{
光标：无！重要；
}
#光标{
位置：固定；
z指数：20000；
高度：15px；
宽度：15px；
背景色：#ffffff；
混合模式：差异化；
边界半径：50%；
不透明度：0；
过渡：0.3s；
过渡属性：变换、不透明度；
指针事件：无；
}
主体：悬停光标{
不透明度：1；
}

悬停在我身上（1）
悬停在我身上（2）
悬停在我身上（3）
这是一个普通的JS解决方案


document.addEventListener（'mousemove'，handleMouseMove，false）；
//缓存元素
const cursor=document.getElementById（'cursor'）；
const buttons=document.queryselectoral（'button'）；
//为每个按钮添加两个事件侦听器
[…按钮].forEach（按钮=>{
按钮。addEventListener（'mouseover'，handleMouseOver，false）；
按钮。addEventListener（'mouseout'，handleMouseOut，false）
});
功能手柄移动（e）{
//您需要确保将“px”添加到
//jQuery会自动执行此操作。
cursor.style.left=`${e.pageX-7}px`；
cursor.style.top=`${e.pageY-7}px`；
}
函数handleMouseOver（）{
cursor.style.transform='scale（2）'；
}
函数handleMouseOut（）{
cursor.style.transform='scale（1）'；
}
正文{
高度：300px；
宽度：300px；
背景色：#ccc；
}
*,
身体{
光标：无！重要；
}
#光标{
位置：固定；
z指数：20000；
高度：15px；
宽度：15px；
背景色：#ffffff；
混合模式：差异化；
边界半径：50%；
不透明度：0；
过渡：0.3s；
转换属性：变换，不透明