我正在尝试制作一个简单的程序，允许我将鼠标悬停在一个图像上以查看另一个图像。我真的很纠结如何处理鼠标悬停功能的第一个。 我意识到 imageNode 是未声明的，但我不知道在哪里声明它以及它将存储什么引用。
如果有人能指出我正确的方向，在鼠标悬停时将 image1 替换为 HTML 中的另一个图像，然后在鼠标退出时返回 image1，我将不胜感激。我现在真的很迷茫。
我已经在下面包含了HTML和JavaScript。
非常感谢，
"use strict";
var $ = function(id) {
return document.getElementById(id);
};
window.onload = function() {
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i,
link,
image;
for ( i = 0; i < links.length; i++) {
link = links[i];
image = new Image();
image.src = link.href;
}
// attach mouseover and mouseout events for each image
image1.onmouseover = function(evt) {
link = this; //this is image that is mouseover
// set new image
//imageNode.src = link.getAttribute("href"
};
image1.onmouseout = function() {
};
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
};<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" title="Catch and Release"></a></li>
<li><a href="images/deer.jpg" title="Deer at Play"></a></li>
<li><a href="images/hero.jpg" title="The Big One!"></a></li>
<li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>一。
如果你有一些像<div id="image-rollover"></div>这样的html， 您可以像这样仅使用 CSS 在悬停时切换图像：
#image-rollover {
background-color: #000;
background-image: url('SOME_IMG_URL');
background-size: cover;
height: 100px;
width: 100px;
}
#image-rollover:hover {
background-image: url('SOME_OTHER_IMG_URL');
}
JSFiddle 中的示例
你可以在Javascript中通过一个简单的方法做到这一点：
var imgOnMouseOver = "OVER_IMG_URI";
var imgOnMouseOut = "OUT_IMG_URI";
var container = document.getElementById("IMG_TAG_ID");
container.addEventListener("mouseover", function(){
container.setAttribute("src", imgOnMouseOver);
});
container.addEventListener("mouseout", function(){
container.setAttribute("src", imgOnMouseOut);
});
示例程序工作正常：https://jsfiddle.net/praveen17/tv8xu67f/2/
image1.onmouseover = function() {
image1.src="images/hero.jpg"
};
image1.onmouseout = function() {
image1.src="images/release.jpg"
};
image2.onmouseover = function() {
image2.src="images/deer.jpg"
};
image2.onmouseout = function() {
image2.src="images/bison.jpg"
};
};