Javascript 无法移动setInterval函数上的元素

我有一张小照片，可能会改变他在悬停事件中的背景位置x。不要在mouseleave上移动。但即使是设定间隔，我他妈的只跑了一次。这是我的密码。有人能帮我吗

let wave = document.querySelector('.wave');

wave.onmouseover = moveWave();

function moveWave() {
    setInterval(function () {
        wave.style.backgroundPositionX  += 10 + 'px';
    }, 100)
}

---

问题出在下面一行： wave.style.backgroundPositionX+=10+'px'

第一次调用后，wave.style.backgroundPositionX将为： 10px

下一次调用后，wave.style.backgroundPositionX将为： 10px10px->格式不正确

正确的方法是：

var count = 10;
let wave = document.querySelector('.wave');
wave.onmouseover = moveWave();

function moveWave() {
    setInterval(function () {
        count += 10;
        wave.style.backgroundPositionX  = count + 'px';
    }, 100)
}

---

wave.onmouseover=moveWave（）

应该是

wave.onmouseover=moveWave

Ty，这样就行了。但是当页面准备好时，它就可以工作了。必须处理悬停事件…函数从悬停事件开始，但我不能在mouseleave上清除间隔。请帮帮我数到10；让wave=document.querySelector（'.wave'）；wave.onmouseover=moveWave（）；wave.onmouseleave=moveLeave（）；变量id；函数moveWave（）{id=setInterval（函数（）{count+=10；wave.style.backgroundPositionX=count+'px'；}，100）}函数moveLeave（）{clearInterval（id）；}

var count = 10;
let wave = document.querySelector('.wave');
wave.onmouseover = moveWave();
wave.onmouseleave = moveLeave();
var id;

function moveWave() {
    id = setInterval(function () {
        count += 10;
        wave.style.backgroundPositionX  = count + 'px';
    }, 100)
}

function moveLeave() {
  clearInterval(id);
}