Having trouble with reversing an animation after unhovering-CodePudding

I'm in a bit of a pickle with this one. So I'm trying to reverse an animation after the element is unhovered (I have already the animation that when on hover plays and I just want to reverse it).

This is the keyframe

@keyframes appearbutton {
    0%{
        width:0px;
        height:0px;
    }
    50%{
        width:0px;
        height:30px;
    }
    100%{
        width:30px;
        height:30px;
    }
}

And using js I'm trying to check when I unhover the button using an eventlistener

window.load = Loaded();

function Loaded(){
    LoadImages();
    
    var searchitems = document.getElementById("siip");

    searchitems.addEventListener(onmouseleave, ReverseAnim());
}

function LoadImages(){ /// This works and is not a problem
    ...
}

function ReverseAnim(){
   console.log("Test");
}

But everytime the page loads the function is called and I see "Test" in console and when I unhover the button there isn't even a second "Test" appearing.

Also this is my HTML, I check whenever the mouse is over the "siip" element and not the input but the animation is on the inputs inside the CSS.

<div id="searchbar">
     <div  id="siip">
          <img src="images/searchbutton.png">
          <input type="text"  id="txtcass">
          <input type="sumbit"  id="subbutt">
     </div>
</div>

CodePudding user response：

You were calling the function directly, you have to pass reference of the function and also you have to use mouseleave instead of onm ouseleave and it should be in quotes

window.load = Loaded();

function Loaded(){
    LoadImages();
    
    var searchitems = document.getElementById("siip");

    searchitems.addEventListener('mouseleave', ReverseAnim);
}

function LoadImages(){ /// This works and is not a problem
    
}

function ReverseAnim(){
   console.log("Test");
}

@keyframes appearbutton {
    0%{
        width:0px;
        height:0px;
    }
    50%{
        width:0px;
        height:30px;
    }
    100%{
        width:30px;
        height:30px;
    }
}

<div id="searchbar">
     <div  id="siip">
          <img src="images/searchbutton.png">
          <input type="text"  id="txtcass">
          <input type="sumbit"  id="subbutt">
     </div>
</div>