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

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 < em>无包裹 - 主体底部。

其次，如果您的代码有错误，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>