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

Ask the community
,
1

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
removeUnderline();
//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;
}

2

Hi!

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
    possible.

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:

3

Hi Doron,

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

Thanks again,
Steve

4

Can you please answer my question: https://www.wix.com/corvid/forum/community-discussion/how-to-get-text-underline-on-hover-effect-in-my-blog-posts-and-blog-menu-pages