Code To Change Multiple Text Links On Hover

Ask the community
, ,
1

Hey fellow community members!

So I’m trying to change the text links on my site to change colour on hover then switch back to their original colour when the mouse is moved off the link.

I’m using the following code and it’s working fine however I’m wanting to set these parameters to multiple links, not just one link.

$w.onReady( function () {
$w( ‘#text69’ ).onMouseIn(()=>{hoverTxt();});
$w( ‘#text69’ ).onMouseOut(()=>{unhoverText();});
});

function hoverTxt(){
let oldHtmlStr = $w( ‘#text69’ ).html;
let newHtmlStr = oldHtmlStr.replace(/#FFFFFF/i, ‘#F9D195’ );
console.log(newHtmlStr);
$w( ‘#text69’ ).html = newHtmlStr;
}

function unhoverText(){
let oldHtmlStr = $w( ‘#text69’ ).html;
let newHtmlStr = oldHtmlStr.replace(/#F9D195/i, ‘#FFFFFF’ );
console.log(newHtmlStr);
$w( ‘#text69’ ).html = newHtmlStr;
}

What code can I use on the same page to change multiple #text links to do the same thing without getting any errors.

Thanks for your help!