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

Question

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

我可以通过使用my_own_css_class来解决这个问题，在悬停时将其添加到所有元素上。但我觉得以编程方式使它们具有hover效果可能对我有一些好处（例如，当鼠标离开它们时，我希望悬停效果能够清除等）。

Answer 1

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

1. CSS方法

<div class="hoverable-element">元素1</div>
<div class="hoverable-element">元素2</div>
<div class="hoverable-element">元素3</div>

.hoverable-element {
  /* 无 */
}

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

2. JavaScript方法

<div class="hoverable-element-js">元素1</div>
<div class="hoverable-element-js">元素2</div>
<div class="hoverable-element-js">元素3</div>

.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');
  });
});