SlickSlider Javascript Hover Effect for Link and Parent Div - loops

Question

Hello, I have built this carousel and we want to add a hover effect
onto the button. Each button is simply a div with a class of
"slick-slide" or "slick-active". "Slick-Active" is the class for any
button (div) you see in the viewport. Each div contains simply a link
(a tag). If you are familiar with Slick Slider you probably know what
I am talking about. The goal here is just to have a blue background
with white text for the link but this is becoming more complex than it
needs to be. I immediately went to just css hover at first but that is
causing ALL buttons to have a blue background, or it will white out
all links. So now I'm thinking this needs to be done with JS since we
want to change the colors on only one div and link at a time instead
of all. I can't add IDs to these as that would make it easy business
obviously. Here is the JS code I have right now, which isn't working
presently. The red is not the intended color just something to test with
but I'm not getting any action from this at all (no bg change at all)
function HoverButtonColorShift() {
let visButtons = document.getElementsByClassName('slick-active');
for (let i = 0; i < visButtons.length; i++) {
let btn = visButtons[i];
btn.addEventListener("mouseenter", function () {
btn.style.background = "red";
});
}
}
HoverButtonColorShift();
Here is the setup in html:
<div class="carousel-link-section-homepage-secton-main-header">
<h3 class="clshs-desktop-header"><asp:Literal ID="CarouselMainHeaderDesktop" runat="server" /></h3>
</div>
<div class="clshs-slider">
<asp:Panel ID="SliderLink1Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink1" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink2Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink2" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink3Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink3" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink4Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink4" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink5Panel" Visable="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink5" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink6Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink6" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
<asp:Panel ID="SliderLink7Panel" Visible="false" CssClass="slick-slide" runat="server">
<asp:HyperLink ID="SliderLink7" CssClass="link-carousel-link" runat="server" />
</asp:Panel>
</div>
</div>
Any ideas how to pull off this relatively easy issue?

Answer 1

A forEach loop is what was needed.
Here is the solution. I will apply it to the text shortly after posting this:
function HoverButtonColorShift() {
let visButtons = document.querySelectorAll('.caroSlide');
visButtons.forEach(slide => {
slide.addEventListener('mouseover', function handleHover(event) {
console.log('slide hover', event);
slide.style.backgroundColor = "#283B87";
});
slide.addEventListener('mouseleave', function handleHoverk(event) {
console.log('slide leave', event);
slide.style.backgroundColor = "white";
});
});
}