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

Question

我是编码新手，我的头脑围绕着 JavaScript 的使用，这对我来说仍然很困难。

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

我尝试在 Google、YouTube 和 stackoverflow 上进行搜索。我设法获得了工作代码，但感觉就像是一团糟和不好的做法，我无法为我的代码实现好的答案，或者他们使用与 ES6 有很大区别的 ES5 JavaScript。

这是我尝试过的事情：

1 .我尝试的第一件事是使用 if 语句创建一个函数。没有完全奏效。可能是因为我对 JS 理解不深。

1. 然后我尝试将EventListener 添加到每个导航菜单项中。这行得通，但它是一团糟。只是复制/粘贴代码块。

2. 然后我尝试再次创建一个函数，并在 HTML 中添加 onmouseover = "function()"，但也没有用。

3. 然后我尝试通过 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>

Answer 1

好吧，想通了！花了我一整天，但我明白了！

首先，在 JSfiddle 上面写着 JavaScript + No-Library (pure JS) 您需要按侧面的箭头，然后为 LOAD TYPE 选择 没有包裹 - 身体底部。

其次，如果你的代码有错误，JSfiddle 用红色表示你的整个目录（在我的例子中是 JavaScript 目录）将不会运行。我的代码中的错误是我只是在底部用 /* 注释了所有不需要的代码，但没有关闭它，因为我认为它不重要。

三、解决方案本身：

// changed whole thing, which was my point. Reduced code from ~50 lines to two functions in 16 lines

// onHover function has a property of i which corresponds to numbers in html on onmouseover and out

// created arrays with IDs, what text and image should be after hovering
// i will correspond to numbers in html which in turn correspond to numbers in arrays

function onHover(i) {
  const array = ["nav-nav1", "nav-nav2", "nav-nav3", "nav-nav4"];
  const strings = ["MY NAV 1 LONGER", "MY NAV 2 LONGER", "MY NAV 3 LONGER", "MY NAV 4 LONGER"];
  const bckgUrls = ["url('https://picsum.photos/id/2/300/200", "url('https://picsum.photos/id/3/300/200')", "url('https://picsum.photos/id/4/300/200')", "url('https://picsum.photos/id/5/300/200')"];
  var idvar = document.getElementById(array[i]);
  idvar.innerHTML = `${strings[i]}`;
	document.getElementById("bckgimg").style.backgroundImage = `${bckgUrls[i]}`;
 }

// when hovering out from text do same like onHover just the reverse
// return values of navigation menu and background image to original

function outHover(i) {
  const array = ["nav-nav1", "nav-nav2", "nav-nav3", "nav-nav4"];
  const strings = ["NAV1", "NAV2", "NAV3", "NAV4"];
  var idvar = document.getElementById(array[i]);
  idvar.innerHTML = `${strings[i]}`;
	document.getElementById("bckgimg").style.backgroundImage = "url('https://picsum.photos/id/1/300/200')";
 }

#bckgimg{
    background-image: url('https://picsum.photos/id/1/300/200');
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    height: 300px;
}

a {
  color: white;
  text-decoration: none;
}

<div id='bckgimg'>

<!-- because we changed ON LOAD options now onmouseover and on mouseout will pull functions from JS -->

<div class="nav-container">
  <a onmouseover="onHover(0)" onmouseout="outHover(0)" href='/nav1' id='nav-nav1' class='nav'>NAV1</a><br>
  <a onmouseover="onHover(1)" onmouseout="outHover(1)" href='/nav2' id='nav-nav2' class='nav'>NAV2</a><br>
  <a onmouseover="onHover(2)" onmouseout="outHover(2)" href='/nav3' id='nav-nav3' class='nav'>NAV3</a><br>
  <a onmouseover="onHover(3)" onmouseout="outHover(3)" href='/nav4' id='nav-nav4' class='nav'>NAV4</a><br>
</div>
</div>