CODEWITHSUNDEEP
javascriptmouseeventsettimeoutmouseovermouseout
Mateo Forr
Mateo Forr

Reputation: 9

How do i implement setTimeout in this code?

Here is simple javascript that changes span of letters with mouse over and mouseout. I want to make my mouseout delayed with setTimeout but im still too newbie for that. Here is the code. Appreciate the help.

function markedletter() {
  this.style.boxShadow = "20px 20px 20px black";
  this.style.fontSize = "52pt";
  this.style.color = "cyan";
}

function unmarkedletter() {
  this.style.boxShadow = "0px 0px 0px transparent";
  this.style.color = "white";
}

let elems = document.getElementsByTagName("span");
for (let i = 0; i < elems.length; i++) {
  elems[i].addEventListener("mouseover", markedletter, false);
  elems[i].addEventListener("mouseout", unmarkedletter, false);
}

Everything above works fine. I just dont know how to implement setTimeout here. I want it to delay mouse out on each letter. I did try some methods but am still new to js.

function setup() {
  setTimeout(nmarkedlatter, 5000);
}

I created function setup like this but it doesnt work alone and I wasnt sure how to implement it in loop nor if I even need to.I Did try some stuff in loop but even the syntax wasnt correct so here we are.

Upvotes: 0

Views: 31

Answers (1)

Barmar
Barmar

Reputation: 781984

Put the call to setTimeout() in unmarkedletter.

function unmarkedletter() {
  setTimeout(() => {
    this.style.boxShadow = "0px 0px 0px transparent";
    this.style.color = "white";
  }, 5000);
}

Upvotes: 2

Related Questions