I'm not sure if I understand the question correctly, but as far as I know there are two possible solutions and they both involve using 'my_own_css_class'

1. CSS method

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

.hoverable-element {
  /* 无 */
}

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

2. JavaScriptMethod

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