Javascript：在链接上鼠标悬停/鼠标悬停期间更改图像和文本_Javascript

Javascript：在链接上鼠标悬停/鼠标悬停期间更改图像和文本

javascript

Javascript：在链接上鼠标悬停/鼠标悬停期间更改图像和文本,javascript,Javascript,在我的javascript程序中，我创建了一个页面，当用户将鼠标移到链接上方时，该页面会同时显示一个图像和描述，当用户将鼠标移到链接上方时，该页面会显示另一个没有描述的图像。但我并没有按照预期得到mouseOver/mouseOut的输出。有人能帮忙吗？我做了以下工作：（i）当鼠标移动到链接上时，我通过传递文本和图像来调用函数（ii）当鼠标移出时，我通过传递一个空白文本和一个不同的图像来调用该函数。当鼠标离开所有链接时，此图像是相同的代码： a组{ 文字装饰：无；字体大小：25px；

在我的javascript程序中，我创建了一个页面，当用户将鼠标移到链接上方时，该页面会同时显示一个图像和描述，当用户将鼠标移到链接上方时，该页面会显示另一个没有描述的图像。但我并没有按照预期得到mouseOver/mouseOut的输出。有人能帮忙吗？我做了以下工作：

（i）当鼠标移动到链接上时，我通过传递文本和图像来调用函数

（ii）当鼠标移出时，我通过传递一个空白文本和一个不同的图像来调用该函数。当鼠标离开所有链接时，此图像是相同的

代码：


a组{
文字装饰：无；
字体大小：25px；
颜色：黄色；
}
.集装箱{
宽度：1002px；
边缘顶部：50px；
左边距：130像素；
}
#首先{
宽度：400px；
浮动：左；
高度：350px；
背景色：#f4b2ef；
边框：插图；
}
#第二{
宽度：590px；
浮动：对；
高度：350px；
颜色：白色；
边框：插图；
}
鼠标移过/移出
摄影比赛

var blank=“”；
var txt=“美丽的秋天”；
var txt2=“自然图片是美丽的”；
var txt3=“美丽的玫瑰园”
var w1=新图像（590350）；
var w2=新图像（590350）；
var w3=新图像（590350）；
var def=新图像（590350）；
w1.src=“images/w1.jpeg”；
w2.src=“images/w2.jpg”；
w3.src=“images/w3.jpg”；
def.src=“images/default.jpeg”；
函数替换img（txt，w1）{
w1.src；
var para=document.getElementById（“para”）.innerHTML=txt；
}
函数defaultImg（空白，def）{
def.src；
var para=document.getElementById（“para”）.innerHTML=blank；
}

我截取了你的代码，只是为了证明你可以使用js函数

addEventListener（“moustover”，callback）

来完成这项工作。我从来没有用你的方式写过代码，所以我不知道如何改进你的。您应该始终将html css和js代码分开

var firstTarget=document.querySelector（“#first”）；
addEventListener（“mouseover”，function（））{
document.querySelector（“#目标图像”）.setAttribute（“src”，”https://via.placeholder.com/350x150)');
})
addEventListener（“mouseout”，function（））{
document.querySelector（“#目标图像”）.setAttribute（“src”，“#”）；
})


鼠标移过/移出
摄影比赛

该代码有几个问题。只有一个参数被传递到函数

w1.src s2.src def.src

不执行您可能认为可以执行的操作，您只是访问该变量，但不执行任何操作。我该如何更正它？有人能帮助吗？

<!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>