添加事件以更改多个img标记

Question

我希望当我做mouseleave时，img的背景会恢复原来的颜色。当我做mouseleave时，我制作的代码会产生颜色浅绿色。为什么呢？

<img width="100" height="100" style="background-color:red">
<img width="100" height="100" style="background-color:bisque">
<img width="100" height="100" style="background-color:aqua">
<script>
    var images = document.querySelectorAll('img');
    var numImages = images.length;
    for(var i = 0; i < numImages; i++){

        var colorOriginal = images[i].style.backgroundColor;
        images[i].addEventListener('mouseleave', function(){
            this.style.backgroundColor = colorOriginal;
        });

        images[i].addEventListener('mouseover', function(){
            this.style.backgroundColor = 'purple';
        });

    }
</script>