如何用JavaScript实现元素:hover时的scale缩放效果？

你之前的JavaScript代码没生效，是因为只是直接给元素设置了transform属性，没有绑定鼠标悬停/离开的事件监听，所以不会在鼠标操作时触发缩放效果。结合你提到的需求——图片初始opacity10%，触发事件后变为100%才启用hover缩放，下面提供两种可行方案：

方案一：纯JavaScript事件监听 #

通过监听mouseenter和mouseleave事件，手动控制缩放的开启与恢复，同时先处理opacity的切换逻辑，确保只有在opacity为100%时才触发缩放：

<img id="penguin" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/1707px-NewTux.svg.png">

#penguin {
  width: 100px;
  opacity: 0.1; /* 初始透明度10% */
  transition: transform 0.2s; /* 可选：添加过渡动画让缩放更平滑 */
}

const penguin = document.getElementById('penguin');

// 模拟触发事件（替换成你实际的触发逻辑，比如按钮点击、接口回调等）
function triggerActiveState() {
  penguin.style.opacity = '1';
  // 启用hover缩放监听
  penguin.addEventListener('mouseenter', () => {
    penguin.style.transform = 'scale(1.04)';
  });
  penguin.addEventListener('mouseleave', () => {
    penguin.style.transform = 'scale(1)';
  });
}

// 示例：点击图片触发激活状态
penguin.addEventListener('click', triggerActiveState);

方案二：结合CSS类（更简洁高效） #

这种方式用JS控制CSS类的添加，把hover逻辑交还给CSS处理，代码更清晰易维护：

<img id="penguin" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/NewTux.svg/1707px-NewTux.svg.png">

#penguin {
  width: 100px;
  opacity: 0.1;
  transition: transform 0.2s;
}

/* 只有添加了active类的元素，hover才会触发缩放 */
#penguin.active:hover {
  transform: scale(1.04);
}

const penguin = document.getElementById('penguin');

function triggerActiveState() {
  penguin.style.opacity = '1';
  penguin.classList.add('active'); // 添加类启用hover缩放
}

// 示例触发逻辑
penguin.addEventListener('click', triggerActiveState);

两种方案都能满足需求，方案二更推荐——CSS处理伪类的性能比JS事件监听更好，代码结构也更直观。

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