我不確定我是否正確理解了問(wèn)題,但據(jù)我所知,有兩種可能的解決方案,它們都包括使用'my_own_css_class'
<div class="hoverable-element">元素1</div> <div class="hoverable-element">元素2</div> <div class="hoverable-element">元素3</div>
.hoverable-element { /* 無(wú) */ } .hoverable-element:hover { /* 重新著色 */ }
<div class="hoverable-element-js">元素1</div> <div class="hoverable-element-js">元素2</div> <div class="hoverable-element-js">元素3</div>
.hoverable-element-js { /* 無(wú) */ } .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'); }); });