17370845950

实现原理

核心思路是通过 JavaScript 监听 .first 区域内

具体实现步骤

1. HTML 结构： 首先，我们需要定义 HTML 结构，包含两个区域 .first 和 .second，每个区域包含一个

   列表，列表中的
   • 元素具有相同的 ID。

       
     
         
     Lorem
         
     Ipsum
         
     Dolor
       
     
     
     
       
     
         
     Lorem
         
     Ipsum
         
     Dolor
       
     

   • JavaScript 代码： 接下来，编写 JavaScript 代码来实现 hover 联动效果。

     document.querySelectorAll(".first ul li").forEach(li => {
       li.addEventListener("mouseover", e => {
         document.querySelectorAll(`#${e.target.id}`)[1].classList.add("active");
       });
       li.addEventListener("mouseout", e => {
         document.querySelectorAll(`#${e.target.id}`)[1].classList.remove("active");
       });
     });

     这段代码首先使用 querySelectorAll 选择 .first 区域内所有的

   • 元素。然后，使用 forEach 循环遍历这些元素，并为每个元素添加 mouseover 和 mouseout 事件监听器。

     在 mouseover 事件处理函数中，e.target.id 获取当前

   • 元素的 ID。然后，使用 querySelectorAll(\#${e.target.id}`)[1]查找所有具有相同 ID 的元素，并选择第二个匹配到的元素。最后，使用classList.add("active")为该元素添加.active` 类。

     mouseout 事件处理函数执行相反的操作，使用 classList.remove("active") 移除 .active 类。

   • CSS 样式： 为了使 .active 类生效，我们需要定义相应的 CSS 样式。

     .active {
       background: #CCC;
     }

     这段代码定义了 .active 类的样式，将背景色设置为灰色。

代码示例

将以上 HTML、JavaScript 和 CSS 代码整合在一起，即可实现完整的 hover 联动效果。

  
  



  
    

      
Lorem
      
Ipsum
      
Dolor
    
  

  
    

      
Lorem
      
Ipsum
      
Dolor
    
  

  

注意事项

• ID 唯一性： 虽然本例中依赖 ID 进行匹配，但请确保页面中 ID 的唯一性，以避免潜在的问题。
• 性能优化： 如果列表数量非常大，频繁的 DOM 操作可能会影响性能。可以考虑使用事件委托或其他优化技巧。
• 可维护性： 为了提高代码的可维护性，可以将 JavaScript 代码封装成函数或模块。

总结

本文介绍了如何使用 JavaScript 实现 hover 联动效果，通过监听事件和 DOM 操作，实现了当鼠标悬停在一个区域的元素上时，联动改变另一个区域中具有相同 ID 的元素的样式。这种方法适用于 ID 动态生成的情况，提供了一种灵活的解决方案。同时，也需要注意 ID 唯一性、性能优化和代码可维护性等方面的问题。