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

在前端开发中，我们经常需要根据用户的交互行为来改变页面元素的样式或行为。其中一个常见的需求是在鼠标悬停在某个元素上时，给与其相关的其他元素添加一个活动类，以改变它们的样式或触发其他操作。

实现这个需求的一种常见方法是使用JavaScript。下面是一个实现的示例代码：

// 获取所有具有与悬停元素相同数据属性的元素
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');
    });
  });
});

上述代码首先通过document.querySelectorAll方法获取所有具有与悬停元素相同数据属性的元素。然后，通过遍历这些元素并添加鼠标悬停事件监听器，实现了当鼠标悬停在某个元素上时，给与其相关的其他元素添加一个活动类的效果。当鼠标移出悬停元素时，相应的活动类也会被移除。

这种方法可以应用于各种场景，例如在导航菜单中，当鼠标悬停在某个菜单项上时，显示对应的子菜单；或者在商品列表中，当鼠标悬停在某个商品上时，显示该商品的详细信息等。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云函数（SCF）、腾讯云云数据库 MySQL版（CDB for MySQL）等。

更多关于腾讯云产品的介绍和详细信息，请访问腾讯云官方网站：腾讯云。