动态为多个元素添加:hover效果

Question

是否有可能以编程方式为多个元素添加hover效果？在我们的系统中，有多个元素代表一个单元（但由于其他原因需要将它们分开成多个元素），在某些情况下，它们应该在悬停时一起重新着色。是否有可能以编程方式为多个元素添加hover效果？或者说这是否是一个良好的实践？我可以通过使用my_own_css_class来解决这个问题，在悬停时将其添加到所有元素上。但我觉得以编程方式使它们具有hover效果可能对我有

P粉564192131 · Answer

我不确定我是否正确理解了问题，但据我所知，有两种可能的解决方案，它们都包括使用'my_own_css_class'

CSS方法

元素1
元素2
元素3

.hoverable-element {
  /* 无 */
}

.hoverable-element:hover {
  /* 重新着色 */
}

JavaScript方法

元素1
元素2
元素3

.hoverable-element-js {
  /* 无 */
}

.hover-effect-js {
  /* 重新着色 */
}

const elements = document.querySelectorAll('.hoverable-element-js');

elements.forEach(element => {
  element.addEventListener('mouseover', () => {
    element.classList.add('hover-effect-js');
  });

  element.addEventListener('mouseout', () => {
    element.classList.remove('hover-effect-js');
  });
});