Problem with mouseOut event

Ask the community
,
1

Hey there, I’m just trying to set up my headings so that they change colors when the mouse hovers over them but I seem to be running into a problem where the Heading doesn’t change back on the mouseOut event. What did I screw up?

export function text3_mouseIn(event) {
 let oldHtmlStr = $w('#text3').html;
 let newHtmlStr = $w('#text3').html = "<h2 style='color:#ff0700'> CONTACT </h2>";
    console.log(newHtmlStr);
    $w('#text3').html = newHtmlStr;
}

export function text3_mouseOut(event) {
let oldHtmlStr = $w('#text3').html;
 let newHtmlStr = $w('#text3').html = "<h2 style='color:#000000'> CONTACT </h2>";
    console.log(newHtmlStr);
    $w('#text3').html = newHtmlStr;
}

Any help would be greatly appreciated… Thanks!

2

Try this one…

export function text3_mouseOut(event) {
    $w('#text3').html = "<h2 style='color:#000000'> CONTACT </h2>";
}

export function text3_mouseIn(event) {
    $w('#text3').html = "<h2 style='color:#ff0700'> CONTACT </h2>";
}

Take also a look onto this here…
https://www.media-junkie.com/html-text

3

That works great, thanks!

4

:wink: