I'm trying to use js in a way that when you hover the mouse over text links, the background image changes with each link. I've been able to initiate the Event Listener to the link texts but am unable to direct the output to the background image div (style elemet)

Here is my html code

<div id="livestream">  
      </div>
      <div id="wedding">  
      </div>
      <div id="documentary">  
      </div>

      <div class="container text-box">
          <a href="#">Livestreaming</a> 
          <a href="#">Weddings</a>
          <a href="#">Documentaries</a>
      </div>

My css, which im stuck too;

.landing #documentary{
    background-image: url("/img/pic-01.jpg");
    background-size: cover;
    height: 100vh;
    z-index: -1;
}

.landing #livestream, #wedding, #documentary{
    display: none;
}

.text-box a:nth-child(1):hover{
    color: #e08416;
    transition: 0.4s ease;}
}

And here is my js code

document.querySelector('.text-box a:nth-child(1)').addEventListener('mouseenter', entering);
document.querySelector('.text-box a:nth-child(1)').addEventListener('mouseleave', leaving);

function entering(ev){
    ev.currentTarget.style.display = "block";
    console.log('mouseenter  a');
}

function leaving(ev){
    ev.currentTarget.style.display = "none";
    console.log('mouseleave a');
}

I got stuck here!