我该怎么做才能通过悬停和单击来使此 javascript 代码工作？

如何解决我该怎么做才能通过悬停和单击来使此 javascript 代码工作？

我想使用 bootstrap5 scrollspy，但添加活动类也有问题，所以我使用了这段代码，这段代码通过点击可以很好地工作，但我希望它通过悬停来工作嗯。

html：

<div class="side-menu col-1 bg-warning h-100 sticky-top">
    <a class="list-group-item list-group-item-action active" href="#section1">one</a>
    <a class="list-group-item list-group-item-action" href="#section2">two</a>
    <a class="list-group-item list-group-item-action" href="#section3">three</a>
    <a class="list-group-item list-group-item-action" href="#section4">four</a>
</div>

<div class="category-sliders col-11 bg-danger">
    <section id="section1" class="pt-5 bg-green" style="height:100vh;">
        <h1> Section 1 </h1>
    </section>
    <section id="section2" class="pt-5 bg-warning" style="height:100vh;">
        <h1> Section 2 </h1>
    </section>
    <section id="section3" class="pt-5 bg-green" style="height:100vh;">
        <h1> Section 3 </h1>
    </section>
    <section id="section4" class="pt-5 bg-warning" style="height:100vh;">
        <h1> Section 4 </h1>
    </section>
</div>

javascript：

<script>
let menuSection = document.querySelectorAll('.side-menu a');

// for clickable event
menuSection.forEach(v=> {
    v.onclick = (()=> {
        setTimeout(()=> {
            menuSection.forEach(j=> j.classList.remove('active'))
            v.classList.add('active')
        },300)
    })
})

// for window scroll down event

window.onscroll = (()=> {
    let mainSection = document.querySelectorAll('.category-sliders section');

    mainSection.forEach((v,i)=> {
        let rect = v.getBoundingClientRect().y
        if(rect < window.innerHeight-200){
            menuSection.forEach(v=> v.classList.remove('active'))
            menuSection[i].classList.add('active')
        }
    })
})

如何通过悬停和点击来使此 javascript 代码工作？