如何让JavaScript鼠标悬停透明度函数作用于多个元素？

方案一：使用JavaScript批量绑定事件 #

如果必须用JavaScript实现，可按以下步骤操作：

1. 给所有目标链接添加统一的class
   给9个链接都加上同一个类名，比如opacity-link：

   <a href="#" class="opacity-link">链接1</a>
   <a href="#" class="opacity-link">链接2</a>
   <a href="#" class="opacity-link">链接3</a>
   <!-- 剩余6个链接同理 -->
   

2. 编写JavaScript代码批量绑定事件
   可以用querySelectorAll（推荐，返回的NodeList支持直接遍历）或getElementsByClassName：

   方法A：querySelectorAll + forEach

   // 确保DOM加载完成后执行代码
   document.addEventListener('DOMContentLoaded', function() {
     // 获取所有带opacity-link类的元素
     const links = document.querySelectorAll('.opacity-link');
     
     // 遍历每个元素，绑定悬停和移出事件
     links.forEach(link => {
       link.addEventListener('mouseover', () => {
         link.style.opacity = '0.9';
       });
       link.addEventListener('mouseout', () => {
         link.style.opacity = '1';
       });
     });
   });
   

   方法B：getElementsByClassName + 循环遍历

   注意getElementsByClassName返回的是HTMLCollection，需要通过索引遍历：

   document.addEventListener('DOMContentLoaded', function() {
     const links = document.getElementsByClassName('opacity-link');
     
     for (let i = 0; i < links.length; i++) {
       const link = links[i];
       link.addEventListener('mouseover', function() {
         this.style.opacity = '0.9';
       });
       link.addEventListener('mouseout', function() {
         this.style.opacity = '1';
       });
     }
   });
   

方案二：使用CSS实现（更高效推荐） #

其实不需要JavaScript，用CSS的:hover伪类就能轻松实现，还能加过渡动画提升体验：

.opacity-link {
  opacity: 1;
  transition: opacity 0.2s ease; /* 平滑过渡效果 */
}

.opacity-link:hover {
  opacity: 0.9;
}

注意事项 #

如果之前用getElementsByClassName失败，大概率是因为代码执行时DOM还未完全加载。解决方法：

• 将JavaScript代码放在HTML文档的</body>标签之前；
• 或者把代码包裹在DOMContentLoaded事件监听中（如上面示例）。

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