当悬停在一个元素上时，改变另一个元素的背景图片。

Question

我尝试使用JavaScript在鼠标悬停在元素上时更改背景图片，但是JavaScript只能在第一个元素上起作用。

document.getElementById("a").addEventListener("mouseover", function() {
    document.getElementById("bg").style.backgroundImage = "url(https://www.gravatar.com/avatar/9385da4a3618cdc385bd49fe3d951b78?s=32&d=identicon&r=PG)";
}, false);
document.getElementById("a").addEventListener("mouseout", function() {
    document.getElementById("bg").style.backgroundImage = "";
}, false);

document.getElementById("b").addEventListener("mouseover", function() {
    document.getElementById("bg").style.backgroundImage = "url(https://image.ibb.co/nOtP2U/2.png)";
}, false);
document.getElementById("b").addEventListener("mouseout", function() {
    document.getElementById("bg").style.backgroundImage = "";
}, false);

 #bg { 
    width: 100px;
    height: 100px;
    background-image: url(https://www.gravatar.com/avatar/d5d2cf334288dd34914b29fd5d941e56?s=32&d=identicon&r=PG)
}

<a id="a" href="" > A</a>

<br></br>

<a id="b" href="" > B</a>

<br></br>

<a id="c" href="" > C</a>

<div id="bg"></div>

样例（或在代码片段中查看）

- bloobit

---

这句话是JavaScript代码，意思是通过id为"i9858d"的元素获取标签名为"a"的元素。 - Radvylf Programs

</br> 不存在。 - Cid

@RedwolfPrograms 我认为那是用户打错了。此外，这个问题不够清楚。请详细说明。 - Shubham Gupta

修正拼写错误后，它似乎可以正常工作。这就是为什么你应该使用开发者控制台的原因。错误信息非常清晰明了。 - epascarello

Imo 应该被视为拼写错误而关闭，因为它对未来读者没有任何价值。 - Martin

Answer 1

您的代码存在几个关键问题，例如：

document.getElementById("a").addEventListener("mouseout", function() {
   document.getElementBy####Id("bg").style.backgroundImage= //Should be getElementById, not getElementBy####Id
   "";
}, false);

另外，有一些小问题是由于输入过快导致的。我改了一下，就解决了。希望这能帮到你！

- Radvylf Programs

Answer 2

您的问题出在语法上。快速查看控制台可以显示代码中出现的错误。

getElementByI9858d 不是有效的方法，您需要使用 getElementById

请参考修改后的代码：

document.getElementById("a").addEventListener("mouseover", function() {
  document.getElementById("bg").style.backgroundImage =
    "url(https://www.gravatar.com/avatar/9385da4a3618cdc385bd49fe3d951b78?s=32&d=identicon&r=PG)";
}, false);
document.getElementById("a").addEventListener("mouseout", function() {
  document.getElementById("bg").style.backgroundImage =
    "";
}, false);



document.getElementById("b").addEventListener("mouseover", function() {
  document.getElementById("bg").style.backgroundImage =
    "url(https://image.ibb.co/nOtP2U/2.png)";
}, false);
document.getElementById("b").addEventListener("mouseout", function() {
  document.getElementById("bg").style.backgroundImage =
    "";
}, false);

#bg {
  width: 100px;
  height: 100px;
  background-image: url(https://www.gravatar.com/avatar/d5d2cf334288dd34914b29fd5d941e56?s=32&d=identicon&r=PG)
}

<a id="a" href=""> A</a>

<br /><br />

<a id="b" href=""> B</a>

<br /><br />

<a id="c" href=""> C</a>

<div id="bg"></div>

- Nick Parsons

Answer 3

从你的代码中只需替换

。

 getElementByI9858d("a").addEventListener("mouseout",

到

getElementById("a").addEventListener("mouseout",

在"mouseout"事件中，你可以得到所需的结果。

- Ketan_Hirapara