How to change the style of an active anchor (in a sidebar nav)?

Question

I am trying to change the style of a sidebar nav anchor when the user scrolls and hovers over the section relevant to that particular anchor (bootstrap scrollspy). that anchor has 2 classes by default: nav-link and js-scroll-trigger", but when we scroll to a particular section, I see another class added to the anchor: "active". so How can I change the style of the anchor text (for ex make it dark), using JS? I already did this code, but it is not working:

const activeNavLink = document.querySelector(".nav-link")
const activeNav = document.querySelector(".active")
experience.addEventListener("mouseover", () => {
 if (active)
activeNav.style.color= "black"
}

experience is the section wrapping the content.

Answer 1

you can add another class and write their color: black; then it will override the bootstrap class

Answer 2

Check this link CheckThis . You can't access that class name maybe you can style it by CSS. If that hyperlink is active set the color as dark