Ajouter dynamiquement des effets de survol à plusieurs éléments

Question

Est-il possible d'ajouter un effet de survol à plusieurs éléments par programmation ? Dans notre système, où plusieurs éléments représentent une seule unité (mais doivent être séparés en plusieurs éléments pour d'autres raisons), dans certains cas, ils doivent être recolorés ensemble lors du survol. Est-il possible d'ajouter un effet de survol à plusieurs éléments par programmation ? Ou est-ce une bonne pratique ? J'ai pu résoudre ce problème en utilisant my_own_css_class pour l'ajouter à tous les éléments en survol. Mais j'ai l'impression que leur donner un effet de survol par programmation pourrait fonctionner pour moi

P粉564192131 · Answer

Je ne suis pas sûr d'avoir bien compris la question, mais pour autant que je sache, il existe deux solutions possibles et elles impliquent toutes deux l'utilisation de 'my_own_css_class'

Méthode CSS

元素1
元素2
元素3

.hoverable-element {
  /* 无 */
}

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

Méthodes 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');
  });
});