javascript - 如何解决 onmouseover 事件中的过渡问题？

Question

当我将鼠标悬停在图片上时，图片会发生变化，但我无法添加过渡效果。谁能指导我如何实现这一目标？

 <img src="/responsiveweb/2.jpeg" id="image1" alt="" style="width:300px; height:300px; object-fit:contain">



 <script>


        var resim = document.getElementById("image1");

        resim.onmouseover = function() {
            resim.src = "/responsiveweb/3.jpeg";
        }
        resim.onmouseout = function() {
            this.src = "/responsiveweb/2.jpeg";

        }
        resim.style.transition = "all 2s";
    </script>

标签： javascripthtmlcss