<div id="catalog">
    <div id="title_catalog">Каталог</div>
    <div id="content_catalog">
      <ul>
        <li><a href="#" title="Школьная мебель">Школьная мебель</a></li>
        <li><a href="#" title="Гостиные">Гостиные</a></li>
        <li><a href="#" title="Детская мебель">Детская мебель</a></li>
      </ul>
    </div>
  </div>
  <div id="base">
    <div id="slider">
      <div class="slider-panel">
        <div class="slider-news"> <a href="#" title="Школьная мебель"><img src="https://media.discordapp.net/attachments/698042876747317328/701790530824175796/dog-647528__340.jpg"</a> </div>
      </div>
      <div class="slider-panel">
        <div class="slider-news"> <a href="#" title="Гостиные"><img src="https://media.discordapp.net/attachments/698042876747317328/701790530824175796/dog-647528__340.jpg"</a> </div>
      </div>
      <div class="slider-panel">
        <div class="slider-news"> <a href="#" title="Детская мебель"><img src="https://media.discordapp.net/attachments/698042876747317328/701790530824175796/dog-647528__340.jpg"</a> </div>
      </div>
    </div>
  </div>

.active {
  background: red;
  padding: 10px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

window.addEventListener('DOMContentLoaded', () => {
  
  const ul = document.querySelector("ul");
  const sliderItems = document.querySelectorAll(".slider-panel");
  
  ul.addEventListener("mouseover", (e) => {
    if (e.target.tagName === "A") {
      const key = [...e.target.parentNode.parentNode.children].indexOf(e.target.parentNode)
      sliderItems[key].classList.add("active");
    }
  });
  
  ul.addEventListener("mouseout", (e) => {
    if (e.target.tagName === "A") {
      const key = [...e.target.parentNode.parentNode.children].indexOf(e.target.parentNode)
      sliderItems[key].classList.remove("active")
    }
  });
 
});