在我的javascript程序中，我创建了一个页面，当用户将鼠标移到链接上时，同时显示图像和描述，并在用户将鼠标移出链接时显示不同的图像，但没有描述。但我没有按照预期在 mouseOver/mouseOut 上获得输出。有人可以帮忙吗？我做了以下事情:
(i) 当鼠标移到链接上时，我通过传递文本和图像来调用该函数。
(ii) 当鼠标移出时，我通过传递空白文本和不同的图像来调用该函数。当鼠标从所有链接移开时，此图像是相同的。
代码:
<!DOCTYPE html>
<html>
<head>
<style>
div a{
text-decoration: none;
font-size: 25px;
color: yellow;
}
.container {
width: 1002px;
margin-top: 50px;
margin-left: 130px;
}
#first {
width: 400px;
float: left;
height: 350px;
background-color:#f4b2ef;
border:inset;
}
#second {
width: 590px;
float: right;
height: 350px;
color: white;
border:inset;
}
</style>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
<a href="#" onMouseOver="replaceImg(this)" onMouseOut="defaultImg(this)"><p style="text-align:center">First Place Winner</p></a>
<a href="#" onMouseOver="replaceImg2(this)" onMouseOut="defaultImg2(this)"><p style="text-align:center">Third Place Winner</p></a>
<a href="#" onMouseOver="replaceImg3(this)" onMouseOut="defaultImg3(this)"><p style="text-align:center">Merit Prize Winner</p></a>
<p id="para"> </p>
</div>
<div id="second">
<img id="default" src="images/default.jpeg" alt=""
width="590" height="350"/>
</div>
</div>
<script>
var blank = "";
var txt = "Beautiful fall";
var txt2 = "Natural pictures are beautiful";
var txt3 = "Beautiful Rose garden"
var w1 = new Image(590, 350);
var w2 = new Image(590, 350);
var w3 = new Image(590, 350);
var def = new Image(590, 350);
w1.src = "images/w1.jpeg";
w2.src = "images/w2.jpg";
w3.src = "images/w3.jpg";
def.src = "images/default.jpeg";
function replaceImg(txt, w1) {
w1.src;
var para = document.getElementById("para").innerHTML = txt;
}
function defaultImg(blank, def) {
def.src;
var para = document.getElementById("para").innerHTML = blank;
}
</script>
</body>
</html>
最佳答案
我 chop 你的代码只是为了证明你可以通过使用 js 函数 addEventListener("moustover",callback) 来完成这项工作。我从来没有按照你的方式编写过代码，所以我不知道如何改进你的方式。您应该始终将 html css 和 js 代码分开。
var firstTarget = document.querySelector("#first");
firstTarget.addEventListener("mouseover",function(){
document.querySelector("#target-image").setAttribute("src",'https://via.placeholder.com/350x150)');
})
firstTarget.addEventListener("mouseout",function(){
document.querySelector("#target-image").setAttribute("src",'#');
})<!DOCTYPE html>
<html>
<head>
<title>mouseover/out</title>
</head>
<body background="images/back.jpg">
<h1 style="text-align: center; font-family: monospace; color: white; font-size: 35px">PHOTO CONTEST </h1>
<div class='container'>
<div id="first">
<a href="#" ><p style="text-align:center">First Place Winner</p></a>
</div>
<div>
<img id="target-image" src="#" alt="">
</div>
</div>关于Javascript:鼠标悬停/鼠标悬停在链接上时更改图像和文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46820622/