Question

大家好，我是该社区的新手，希望能有所帮助！我在使用JavaScript的初学者水平！一直试图做到这一点，但似乎无法在网上找到任何东西，希望有人能帮助我！

 <script>
    window.addEventListener("load", function() {

        var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";

        // mouseover
        sImg1.addEventListener("mouseover", function() {
                sImg1.getElementById("myImg1").src = "images/image_1C.jpg";
            })
            //mouseout
        sImg1.addEventListener("mouseout", function() {
            sImg1.getElementById("myImg1").src = "images/image_1P.jpg";
        })
    })
</script>



<body>
<img class="img1" id="myImg1" src="" width="150" height="200">

id希望图像在鼠标悬停时从1p转换为1c，在鼠标悬停时从1c变为1p！

Answer 1

您的脚本做什么和不做什么。

window.addEventListener("load", function() {

    var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";
    //sImg1 is a string which doesn't have events

    // mouseover makes no sense (see above)
    sImg1.addEventListener("mouseover", function() {
            sImg1.getElementById("myImg1").src = "images/image_1C.jpg";
        })
        //mouseout
    sImg1.addEventListener("mouseout", function() {
        sImg1.getElementById("myImg1").src = "images/image_1P.jpg";
    })
})

如何修复。

window.addEventListener("load", function() {

    var sImg1 = document.getElementById("myImg1");
    sImg1.src = "images/image_1P.jpg";

    // mouseover
    sImg1.addEventListener("mouseover", function() {
            //this is an event source
            this.src = "images/image_1C.jpg";
        });
        //mouseout
    sImg1.addEventListener("mouseout", function() {
        this.src = "images/image_1P.jpg";
    });
})

Answer 2

img1没有ID。它应该是myImg1。因此，您的var sImg1 = document.getElementById("img1")是null。

您的代码还有许多其他问题。在var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";行中。您没有选择元素，而是要进行赋值操作。因此，您的sImg1将有image path。就像做const a = b = 10;

添加事件侦听器后，您有sImg1.getElementById("myImg1")，这是不正确的。应该是document.getElementById("myImg1")。

window.addEventListener("load", function() {
    const sImg1 = document.getElementById("myImg1");

    sImg1.src= "images/image_1P.jpg"
    sImg1.alt = "image_1P.jpg";

    sImg1.addEventListener('mouseover', function() {
        sImg1.src = "images/image_1C.jpg";
        sImg1.alt = "image_1C.jpg";
    });

    sImg1.addEventListener('mouseout', function() {
        sImg1.src = "images/image_1P.jpg";
        sImg1.alt = "image_1P.jpg";
    });
});

<img class="img1" id="myImg1" src="" width="150" height="200">

Answer 3

您的想法绝对正确，但是您犯了一些编程错误。我认为在Javascript中使用continuous assignment并不是一个好主意，在许多语言中，这都是不好的做法。

var sImg1 = document.getElementById("img1").src = "images/image_1P.jpg";

在上一行中，sImg1是"images/image_1P.jpg"，而不是dom。

<script>
    window.addEventListener("load", function() {

        var sImg1 = document.getElementById("img1")
        sImg1.src = "images/image_1P.jpg";

        // mouseover
        sImg1.addEventListener("mouseover", function() {
                // you have sImg1 already
                sImg1.src = "images/image_1C.jpg";
            })
            //mouseout
        sImg1.addEventListener("mouseout", function() {
            sImg1.src = "images/image_1P.jpg";
        })
    })
</script>

Answer 4

   <head>
    <style type="text/css">
    .card {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
        margin: 50px;
    }
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }
 </style>
</head>
<body>
    <div class="card">
    <img src="/examples/images/card-back.jpg" alt="Card Back">

    <img src="/examples/images/card-front.jpg" class="img-top" alt="Card Front">

    </div>
</body>

如何在鼠标悬停时交换图像并在鼠标悬停时恢复为原始图像？

4 个答案: