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

Question

Est-il possible d'ajouter par programme un effet hover 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 par programme un effet hover 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 qu'il pourrait être utile pour moi de leur donner par programme un effet hover (par exemple, je veux que l'effet de survol s'efface lorsque la souris les quitte, etc.).

Answer 1

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'

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