Tambah secara dinamik : kesan hover pada berbilang elemen
P粉203792468
P粉203792468 2023-08-15 23:49:58
0
1
484
<p>Adakah mungkin untuk menambah kesan <kod>tuding</kod> 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 <kod>tuding</kod> Atau adakah ini amalan yang baik? </p> <p>Saya dapat menyelesaikan masalah ini dengan menggunakan <kod>my_own_css_class</code> Tetapi saya rasa ia mungkin memberi manfaat kepada saya untuk menjadikan mereka mempunyai kesan <kod>tuding</kod> (cth. Saya mahu kesan tuding itu dikosongkan apabila tetikus meninggalkannya, dsb.). </p>
P粉203792468
P粉203792468

membalas semua(1)
P粉564192131

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 {
  /* 重新着色 */
}
  1. 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');
  });
});
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan