将鼠标悬停在文本上时，更改文本和背景图像

Question

我刚开始使用javascript进行编码和处理，这对我来说仍然很困难。

我的问题是，我有一个导航菜单，其中只有一个单词。我希望当我将鼠标悬停在整个站点的导航菜单上时，其背景会相应于我所悬停的导航菜单项而发生更改，并且该导航项会将其内容从一个单词更改为更多单词。

我曾尝试在Google，YouTube和此处的stackoverflow上进行搜索。我设法获得了可以运行的代码，但是感觉像是一团糟并且是一种不好的做法，我无法为我的代码实现良好的答案，或者他们使用的ES5 JavaScript与ES6有所不同。

这是我尝试过的事情：

1。我尝试的第一件事是用if语句创建一个函数。没工作。可能是由于我对JS的了解不足。

然后我尝试将EventListener分别添加到每个导航菜单项。那行得通，但这是一团糟。仅复制/粘贴代码块。
然后我尝试再次创建一个函数，并且在html内包含onmouseover =“ function（）”，但也无法正常工作。
然后，我尝试通过CSS进行操作，但是我的经验不足再次表明了这一点。我无法通过：before和：after来成功实现。

我在这里有一些示例代码。

<div id='bckgimg'>

<div class="nav-container">
  <a href='/nav1' id='nav-nav1' class='nav'>NAV1</a>
  <a href='/nav2' id='nav-nav2' class='nav'>NAV2</a>
  <a href='/nav3' id='nav-nav3' class='nav'>NAV3</a>
  <a href='/nav4' id='nav-nav4' class='nav'>NAV4</a>
</div>
</div>

<style>

#bckgimg
    background-image: url('https://picsum.photos/id/1/300/200');


</style>

<script>

const nav1 = document.getElementById('nav-nav1');
const nav2 = document.getElementById('nav-nav2');
const nav3 = document.getElementById('nav-nav3');
const nav4 = document.getElementById('nav-nav4');
const bckgImg = document.getElementById("bckgimg");

// repeat this code 3 more times with nav2, nav3, nav4
// code bellow checks if <div> is hovered over and changes background image <div> + changes text of the <div>

navStories.addEventListener('mouseenter', e => 
  bckgImg.style.backgroundImage = "url('https://picsum.photos/id/2/300/200')";
  navStories.innerHTML = "MY NAV 1 LONGER";
);

// if <div> is hovered out it returns the original picture to background <div> and original text of <div>

navStories.addEventListener('mouseleave', e => 
  bckgImg.style.backgroundImage = "url('https://picsum.photos/id/1/300/200')";
  navStories.innerHTML = "NAV1";
);

</script>