Tambah secara dinamik : kesan hover pada berbilang elemen

Question

Adakah mungkin untuk menambah kesan tuding Dalam sistem kami, apabila terdapat berbilang elemen yang mewakili satu unit (tetapi perlu dipisahkan kepada berbilang elemen atas sebab lain), dalam beberapa kes elemen tersebut harus diwarnakan semula bersama-sama pada tuding. Adakah mungkin untuk menambah kesan tuding Atau adakah ini amalan yang baik?

Saya dapat menyelesaikan masalah ini dengan menggunakan my_own_css_class Tetapi saya rasa ia mungkin memberi manfaat kepada saya untuk menjadikan mereka mempunyai kesan tuding (cth. Saya mahu kesan tuding itu dikosongkan apabila tetikus meninggalkannya, dsb.).

Answer 1

Saya tidak pasti sama ada saya memahami soalan dengan betul tetapi setahu saya terdapat dua penyelesaian yang mungkin dan kedua-duanya melibatkan penggunaan 'my_own_css_class'

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