使用 innerHTML 将鼠标悬停在图像上
mouse over image with innerHTML
当鼠标悬停在图像上时,我需要将其换出。我相信它也应该使用 innerHTML
。
<body>
<a href="#">anime</a>
<a href="#">ponies</a>
<h1 class="panel">What fandom is better?</h1>
<div class="anime"> <img src="img/anime.png"> </div>
<div class="pony"> <img src="img/pony.png"> </div>
<p id="answer">Choose One</p>
</body>
/**
This is for element changes upon mousesing over of the area
*/`
document.getElementsByClassName("anime")[0].onmouseover=
function(){
orangeBorder1();
mouseAnime();
}
document.getElementsByClassName("pony")[0].onmouseover=
function(){
orangeBorder();
mousePony();
}
function mousePony(){
document.getElementById("pony").src="pony1.png";
}
我不知道你的代码是不是复制错了,但是你没有任何id为pony的东西
getElementById 将查找属性为 id
的标签,指定该标签,您的代码应该可以工作。
id 在页面中应该是唯一的。您还应该给 div 一个 id 而不是查询类名
当鼠标悬停在图像上时,我需要将其换出。我相信它也应该使用 innerHTML
。
<body>
<a href="#">anime</a>
<a href="#">ponies</a>
<h1 class="panel">What fandom is better?</h1>
<div class="anime"> <img src="img/anime.png"> </div>
<div class="pony"> <img src="img/pony.png"> </div>
<p id="answer">Choose One</p>
</body>
/**
This is for element changes upon mousesing over of the area
*/`
document.getElementsByClassName("anime")[0].onmouseover=
function(){
orangeBorder1();
mouseAnime();
}
document.getElementsByClassName("pony")[0].onmouseover=
function(){
orangeBorder();
mousePony();
}
function mousePony(){
document.getElementById("pony").src="pony1.png";
}
我不知道你的代码是不是复制错了,但是你没有任何id为pony的东西
getElementById 将查找属性为 id
的标签,指定该标签,您的代码应该可以工作。
id 在页面中应该是唯一的。您还应该给 div 一个 id 而不是查询类名