Estoy tratando de hacer un botón de inicio para mi sitio web y usando "onmouseover" para cambiar lo que dice el botón y quiero que vuelva a lo que decía antes cuando el usuario ya no se desplaza sobre el botón.

actualmente tengo esto:

 <a href="index.html"><button id="b1" class="b1" onmouseover="hover(this)" onmouseout="unHover(this)">{WELCOME}</button></a>

y en un archivo aparte tengo el JS:

 function hover(element){ if(element.alreadyHovered == null) { element.alreadyHovered = true; console.log("hover"); let hover = document.querySelector('#b1'); let anim = [ { t: "{ }", ms: 200}, { t: "{K_}", ms: 200 }, { t: "{KB_}", ms: 200 }, { t: "{KBO_}", ms: 200 }, { t: "{KBOA_}", ms: 400 }, { t: "{KBOAN}", ms: 400 }, ]; let stepDenominator = 1; if (window.localStorage.stepDenominator) stepDenominator = window.localStorage.stepDenominator; let i = 0; let update = () => { let step = anim[i]; hover.innerText = step.t; i++; if (i < anim.length) setTimeout(update, step.ms / stepDenominator); else { window.localStorage.stepDenominator = 2; } } update(); } } function unHover(element){ element.alreadyHovered = null console.log("unhover") let hover = document.querySelector('#b1'); let anim = [ { t: "{W_}", ms: 200 }, { t: "{WE_}", ms: 200 }, { t: "{WEL_}", ms: 200 }, { t: "{WELC_}", ms: 200 }, { t: "{WELCO_}", ms: 200 }, { t: "{WELCOM_}", ms: 400 }, { t: "{WELCOME}", ms: 400 }, ]; let stepDenominator = 1; if (window.localStorage.stepDenominator) stepDenominator = window.localStorage.stepDenominator; let i = 0; let update = () => { let step = anim[i]; hover.innerText = step.t; i++; if (i < anim.length) setTimeout(update, step.ms / stepDenominator); else { window.localStorage.stepDenominator = 2; } } update(); }

cuando uso esto, ambas funciones se ejecutan al mismo tiempo y no hace lo que quiero, por favor ayuda.