Text underline hover effect

Ask the community
,
4

Hi,
As i see, you still have 2 onReady in your code!
So, from what i understood, your default onReady case is to have the text with no underline, which make since to remove all the lines from the two texts onLoad.
Also try to click on the Text Element and assign the mouseIn function .

Here is a snippet code you can use for your case :

$w.onReady(function () {
removeUnderline();  
});


function removeUnderline() {
let text1 = $w("#text20").html;
let text2 = $w("#text24").html;
$w("#text20").html = text1.replace("underline","none");
$w("#text24").html = text2.replace("underline","none");
}

function addUnderline(text) { // it takes the hovered text and apply the effect
let oldHtmlStr = text.html;
let newHtmlStr = oldHtmlStr.replace(/none/i, 'underline');
text.html = newHtmlStr;
}

export function text20_mouseIn(event, $w) {
let text = $w("#text20");
    addUnderline(text);
}

export function text20_mouseOut(event, $w) {
 removeUnderline();
}

export function text24_mouseIn(event, $w) {
 let text = $w("#text24");
    addUnderline(text);
}

export function text24_mouseOut(event, $w) {
    removeUnderline();
}

Hope this helps!
Best,

Mustafa