以编程方式添加 :hover 到多个元素[关闭]

Question

是否可以以编程方式将

hover

添加到多个元素？在我们的系统中，有更多的元素代表一个单元（但由于其他原因需要将它们分成更多的元素），并且在某些情况下，它们应该在悬停时一起重新着色。是否可以以编程方式将

hover

添加到多个元素？回复。这是好的做法吗？

我可以使用

my_own_css_class

轻松解决这个问题，它将在悬停时添加到所有这些内容中。但在我看来，以编程方式制作它们

hover

可能对我有一些好处（例如，当鼠标离开它们时，我希望悬停能够被清除，等等）。

Answer 1

在某些情况下，它们应该在悬停时一起重新着色

我不确定我是否很好地理解了这个问题，但据我所知，有两种可能的解决方案，并且它们都包括使用“my_own_css_class”

1. CSS 方法

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

.hoverable-element {
  /* Nothing */
}

.hoverable-element:hover {
  /* Recolour */
}

2. JavaScript 方法

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

.hoverable-element-js {
  /* Nothing */
}

.hover-effect-js {
  /* Recolour */
}

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