JS -向具有与悬停元素相同的数据属性的元素添加活动类

// 获取所有具有与悬停元素相同数据属性的元素
const hoverElements = document.querySelectorAll('[data-hover]');

// 给每个元素添加鼠标悬停事件监听器
hoverElements.forEach(element => {
  element.addEventListener('mouseover', () => {
    // 获取悬停元素的数据属性值
    const hoverValue = element.getAttribute('data-hover');
    
    // 获取具有相同数据属性值的其他元素
    const targetElements = document.querySelectorAll(`[data-hover="${hoverValue}"]`);
    
    // 给目标元素添加活动类
    targetElements.forEach(targetElement => {
      targetElement.classList.add('active');
    });
  });
  
  element.addEventListener('mouseout', () => {
    // 获取悬停元素的数据属性值
    const hoverValue = element.getAttribute('data-hover');
    
    // 获取具有相同数据属性值的其他元素
    const targetElements = document.querySelectorAll(`[data-hover="${hoverValue}"]`);
    
    // 移除目标元素的活动类
    targetElements.forEach(targetElement => {
      targetElement.classList.remove('active');
    });
  });
});