"Scrolled out of view" interaction is overriding my hover state

Hey There,

I’ve created a page that consists of a sidebar with 10 sections. Each sidebar text element has an anchor link that brings the page to the connected section. I’ve also added a “scroll into view” interaction so that when the connected section scrolls into view, the text stays dark, creating a “selected” state. I’ve also set a “scroll out of view” to return the text element to its original color, but the “scroll out of view” color is now overriding my hover states.

Any help would be greatly appreciated! Thank you!

https://preview.webflow.com/preview/austin-acevedo?utm_medium=preview_link&utm_source=designer&utm_content=austin-acevedo&preview=c9c243a74a94964b5ea4b1d108910424&pageId=605a61d346f2596354a35f5a&mode=preview


Here is my public share link: LINK
(how to access public share link)

Solution found here: