javascript - 悬停在一个元素上更改另一个元素的背景图像
问题描述
我尝试使用 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>
示例(或在片段中查看)
解决方案
您的代码存在一些关键问题。例如:
document.getElementById("a").addEventListener("mouseout", function() {
document.getElementBy####Id("bg").style.backgroundImage= //Should be getElementById, not getElementBy####Id
"";
}, false);
此外,输入速度过快也存在一些小问题。我改变了它,它工作。希望这可以帮助!