绝绝子！ 较大家良好，今天来聊一聊怎么用 JavaScript 搞一个鼠标悬停时把一个图标变成另一个图标的功能。其实这件事不不容简单，代码量不更多，但是要注意细节。下面先说说思路，然后给你几个代码示例。

一、 先说思路，别看我没学过书，但我也了解较大概流程

基本思路是：有两个 icon，一个叫开锁 icon，一个叫关锁 icon。我们把它们放在同一个父容器里 然后给父容器加个事件监听， 另起炉灶。 当鼠标进来时把开锁的 display 改成 none，把关锁的 display 改成 block；当鼠标离开时再恢复默认状态。

如果你只想用 CSS， 也能够用 :hover 伪类搞定，但要注意，display:none 的元素根本不会收到 hover 事件，所以只能改变 opacity 或 visibility，或者直接把两个元素都放着，用 JS 切换可见性更靠谱。

1️⃣ 用纯 CSS 的方法

注意：如果你在 CSS 中把 #closedIcon 设置为 display:none，那么它根本就不会被 mouseover 所触发哦！ 造起来。 所以你只能改成 visibility:hidden 或 opacity:0 再配合 transition。

.icon-open{display:block;}
.icon-close{display:none;}
.parent:hover .icon-open{display:none;}
.parent:hover .icon-close{display:block;}

当前这个方法有点问题， 这是因为当你把 .icon-close 设置为 display:none 时它根本不占空间范围， 不忍直视。 也无法接收 hover，所以实际情况是上面那段代码在更多数浏览器里都不起作用。

2️⃣ 用 JavaScript 的方法

下面给出一个最常见的 JS 写法。请记住：一定要给父容器加 id 或 class，否则后面找不到元素，换位思考...。

抄近道。 上面这段代码是最常见的写法， 虽然很直白，但是有一点点较小毛病：我们没有给 close 初始状态设 display=none，如果你的页面刚启动加载的时候就会看到两个 icon 沉重叠，尤其是在如果你没有设置 css 样式的话。解决办法就是在 css 里写：

#closeIcon{display:none;}

或者直接在 js 里初始化：

// 初始化
open.style.display='block';
close.style.display='none';

⚡️ 较小技巧：采用 setAttribute 更迅速一点？其实没啥差别，只是写法不同而已。

比如：

三、为哪些有人还是选 jQuery？🤔

前几天看到有人说 jQuery 简洁点， 于是给你们留个 jQuery 示例吧，不要误会，我也没怎么学过 jQuery，只能随便拼凑一下。

jQuery 的 hide/show 默认会有动画效果， 如果你不想动画，能够加 .stop 或者 .css 手动改样式。 我破防了。 不过 jQuery 本身也会让页面体积增较大，如果只是做这件较小事，推荐还是原生 JS，更轻巧量。

四、 性能较小提醒 🚀🚀🚀

① 如果页面里有很更多类似的元素，就不要给各个都绑定事件，而是用事件委托，把事件绑在文档或某个父容器上，再判断 event.target 就行了；② 尽量避免频繁修改 style，而是采用 class 切换，让 css 控制样式；③ 如果你想做动画效果，能够加 transition，让视觉更流畅。

5️⃣ 常见错误汇总😅

• 遗忘给初始状态设 display=none；最终还是结果是页面刚加载就看到两个图标沉重叠。
• 把 JS 放到 head 里但还没加载完 body 元素引起 getElementById 找不到；解决方案：把 script 放到 body 底部或 wrap 在 window.onload。
• 用了 onmouseover 而不是 onmouseenter，这是因为 onmouseover 会触发子元素改变引起更多次落实；但对简洁案例也无所谓。
• 忘了关闭标签， 举个例子 写成 &
• 采用了错误的选择器，举个例子 querySelector 而实际类名是 'fa-solid fa-lock-open'，引起找不到元素.

• 六、完整示例

  
      
  
         
  
   P.S.: 本文仅供学习了解交流，不得用于商业活动用途。转载请附上原文链接并注明作者。
  文章浏览阅读897次。
  ©2026 All rights reserved.
  &ltnavbar...
  Hello world!
  &ltnavbar...
  Hello world!
  &ltnavbar...
  Hello world!
  &ltnavbar...
  Hello world!
  &ltnavbar...
  Hello world!
  &ltnavbar...
  Hello world!
  &ltnavbar...
  Hello world!
  &ltnavbar...
  ©COPYRIGHTS 2026 ALL RIGHTS RESERVED.
  
  Acknowledgements:The author has no formal education in web development but tried his best.
  {/* This line is just nonsense for testing */}
  
  
  ©…