I'm trying to make a home button for my website and using "onmouseover" to change what the button says and I want it to go back to what it said before when the user isn't hovering over the button anymore.
currently I have this:
<a href="index.html"><button id="b1" onm ouseover="hover(this)" onm ouseout="unHover(this)">{WELCOME}</button></a>
and in a separate file I have the 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();
}
when I use this both functions run at the same time and it doesn't do what I want, please help.
CodePudding user response:
Check your CSS. There could be a problem that you are hovering a text, and when it changes in size, it cancels the mouse hover.