動態為多個元素添加: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');
  });
});