Fügen Sie :Hover-Effekte dynamisch zu mehreren Elementen hinzu

Question

Ist es möglich, programmgesteuert einen Hover-Effekt hinzuzufügen? In unserem System, in dem es mehrere Elemente gibt, die eine einzelne Einheit darstellen (aber aus anderen Gründen in mehrere Elemente aufgeteilt werden müssen), sollten sie in manchen Fällen beim Schweben gemeinsam neu eingefärbt werden. Ist es möglich, programmgesteuert einen Hover-Effekt hinzuzufügen? Oder ist das eine gute Praxis?

Ich konnte dieses Problem lösen, indem ich my_own_css_class verwendet habe, um es allen Elementen beim Hover hinzuzufügen. Aber ich habe das Gefühl, dass es für mich von Vorteil sein könnte, ihnen programmgesteuert einen Hover-Effekt zu verleihen (z. B. möchte ich, dass der Hover-Effekt verschwindet, wenn die Maus sie verlässt usw.).

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