Add Underline to text for hyperlink, only when hovering the text; with a catch...

I have this small amount of code that works (almost, the hyperlink doesn’t work), and it works for one #text17 box. However, I need this code to work on 10 different #text boxes, with 10 different Hyperlinks.

Here is my current code if someone can help a Wix Code Noob out. :slight_smile: Thanks

$w.onReady( function () {
//removing the underline when the page is ready
//removing the underline when not hovering the text
$w(‘#text17’).onMouseOut(() => { removeUnderline(); });
//adding the underline when hovering the text
$w(‘#text17’).onMouseIn(() => { addUnderline(); });

function removeUnderline() {
let oldHtmlStr = $w(‘#text17’).html;
let newHtmlStr = oldHtmlStr.replace(/underline/i, ‘none’);
$w(‘#text17’).html = newHtmlStr;

function addUnderline() {
let oldHtmlStr = $w(‘#text17’).html;
let newHtmlStr = oldHtmlStr.replace(/none/i, ‘underline’);
$w(‘#text17’).html = newHtmlStr;


If I got your intentions right, why not do the following:

  1. Have all the text elements (that you want to alter and add hyperlinks to) visible and normal on load.
  2. Have a second set of the same elements hidden on load. On this set have all the changes you need
    (underlining, hyperlinks, coloring, etc.)
  3. Use the show() / hide() methods in order to switch between the pairs of text elements onMouseIn/out.
  4. Place the two sets of elements aligned the same way so the change will appear as smooth as

If that is not what you meant to have, please reply with a further explanation on your goals so we can find another solution for you.

Doron. :slight_smile:

1 Like

Hi Doron,

Thank you so much for the suggestion. I spent a while practicing and I finally got it.

Thanks again,

1 Like

Can you please answer my question: