JavaScript鼠标悬停元素缩放功能失效，求助代码修改方案

你的代码存在三个关键问题，逐一修正后就能正常实现悬停放大的功能：

1. HTMLCollection 无法直接调用 forEach #

document.getElementsByClassName() 返回的是HTMLCollection（类数组对象），不是标准数组，不能直接使用 forEach 遍历。需要先把它转换成数组：

// 方法1：用Array.from转换
let first = Array.from(document.getElementsByClassName('contact'));
// 方法2：用展开运算符
let first = [...document.getElementsByClassName('contact')];

2. 事件处理函数的参数误用 #

bigger 和 normal 函数里的 event 是事件对象，不是触发事件的DOM元素。要修改元素样式，得通过 event.target 获取目标元素：

let bigger = function (event) {
  event.target.style.maxHeight = "10rem";
}

let normal = function (event) {
  event.target.style.maxHeight = "8rem";
}

3. 转义引号语法错误 #

原代码里的 " 是HTML转义字符，在JavaScript中要替换成正常的双引号 "，否则会导致语法报错。

修复后的完整代码 #

let first = Array.from(document.getElementsByClassName('contact'));

let bigger = function (event) {
  event.target.style.maxHeight = "10rem";
}

let normal = function (event) {
  event.target.style.maxHeight = "8rem";
}

let changeSize = function(button) {
  button.addEventListener('mouseover', bigger);
  button.addEventListener('mouseout', normal);
}

first.forEach(changeSize);

额外优化建议 #

其实用CSS的:hover伪类就能实现这个效果，比JavaScript更简洁高效，还能添加平滑过渡动画：

.contact {
  max-height: 8rem;
  transition: max-height 0.3s ease; /* 悬停过渡更自然 */
}

.contact:hover {
  max-height: 10rem;
}

内容的提问来源于stack exchange，提问作者Philip Curtis