84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
是否有可能以程式設計方式為多個元素添加hover效果？在我們的系統中，有多個元素代表一個單元（但由於其他原因需要將它們分開成多個元素），在某些情況下，它們應該在懸停時一起重新著色。是否有可能以程式設計方式為多個元素添加hover效果？或者說這是否是一個好的實踐？
hover
我可以透過使用my_own_css_class來解決這個問題，在懸停時將其添加到所有元素上。但我覺得以程式設計方式使它們具有hover效果可能對我有一些好處（例如，當滑鼠離開它們時，我希望懸停效果能夠清除等）。
my_own_css_class
我不確定我是否正確理解了問題，但據我所知，有兩種可能的解決方案，它們都包括使用'my_own_css_class'
元素1 元素2 元素3
.hoverable-element { /* 无 */ } .hoverable-element:hover { /* 重新着色 */ }
.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'); }); });
我不確定我是否正確理解了問題，但據我所知，有兩種可能的解決方案，它們都包括使用'my_own_css_class'
.hoverable-element { /* 无 */ } .hoverable-element:hover { /* 重新着色 */ }.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'); }); });